Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí.
Primer CSS Flexbox Flex Container se usa para hacer un diseño de elemento y su contenido usando el modelo flexbox. Cada hijo directo del contenedor flexible se convertirá en un elemento flexible.
Primer CSS Flexbox Clases de contenedores flexibles:
- d-flex: la clase se usa para hacer los elementos como un bloque y presenta su contenido usando el modelo flexbox.
- d-inline-flex: la clase se usa para hacer que el elemento sea como un elemento en línea y presenta su contenido usando el modelo flexbox.
Sintaxis:
<div class="border d-flex">
...
</div>
Ejemplo 1: El siguiente ejemplo ilustra el Primer CSS Flexbox Flex Container utilizando la clase d-flex .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Flex Container</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <h1 class="color-fg-success text-center"> GeeksforGeeks </h1> <h4 class="text-center font-bold"> Primer CSS Flex Container </h4> <strong>Flexbox Container d-flex Class:</strong> <div class="border d-flex m-2 color-bg-open"> <div class="m-2 p-5 border color-border-success-emphasis color-bg-accent"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-accent-emphasis"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-success"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-success-emphasis"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-accent"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-accent-emphasis"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-success"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-success-emphasis"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-accent"> </div> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo ilustra el contenedor flexible Flexbox de Primer CSS utilizando la clase d-inline-flex .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Flex Container</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <h1 class="color-fg-success text-center"> GeeksforGeeks </h1> <h4 class="text-center font-bold"> Primer CSS Flex Container </h4> <strong>Flexbox Container d-inline-flex Class:</strong> <div class="border d-inline-flex m-2 color-bg-open"> <div class="m-2 p-5 border color-border-success-emphasis color-bg-accent"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-accent-emphasis"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-success"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-success-emphasis"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-accent"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-accent-emphasis"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-success"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-success-emphasis"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-accent"> </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/flexbox#flex-container
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA