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 Align Content se utiliza para crear múltiples líneas de eje principal y agrega espacio adicional en el eje transversal. Además, estas clases se utilizan para alinear las líneas del eje principal en el eje transversal.
Primer CSS Flexbox Alinear clases de contenido:
- flex-content-start: esta clase se utiliza para alinear elementos de contenido específicos al inicio del eje transversal.
- flex-content-end: esta clase se utiliza para alinear elementos de contenido específicos al final del eje transversal.
- flex-content-center: esta clase se utiliza para alinear elementos de contenido específicos con el centro del eje transversal.
- flex-content- between: esta clase se utiliza para distribuir el contenido de manera uniforme.
- flex-content-around: esta clase se utiliza para alinear elementos de contenido específicos alrededor de un eje transversal.
- flex-content-stretch: esta clase se usa para estirar elementos de contenido específicos desde el inicio del eje transversal hasta el final del eje transversal.
Sintaxis:
<div class="border d-flex
Flexbox-Align-content-Class">
...
</div>
Ejemplo 1: Este ejemplo demuestra el Primer CSS Flexbox Align Content.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Align Content </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 Flexbox Align Content </h4> <br> <strong> Flexbox flex-content-start Class </strong> <div style="min-height: 120px;" class="border d-flex m-2 flex-wrap flex-content-start"> <div class="p-5 border color-bg-accent-emphasis"> First Item </div> <div class="p-5 border color-bg-success-emphasis"> Second Item </div> <div class="p-5 border color-bg-danger-emphasis"> Third Item </div> <div class="p-5 border color-bg-accent"> Fourth Item </div> <div class="p-5 border color-bg-success"> Fifth Item </div> <div class="p-5 border color-bg-danger"> Sixth Item </div> </div> <br> <strong> Flexbox flex-content-center Class </strong> <div style="min-height: 120px;" class="border d-flex m-2 flex-wrap flex-content-center"> <div class="p-5 border color-bg-accent-emphasis"> First Item </div> <div class="p-5 border color-bg-success-emphasis"> Second Item </div> <div class="p-5 border color-bg-danger-emphasis"> Third Item </div> <div class="p-5 border color-bg-accent"> Fourth Item </div> <div class="p-5 border color-bg-success"> Fifth Item </div> <div class="p-5 border color-bg-danger"> Sixth Item </div> </div> <br> <strong> Flexbox flex-content-end Class </strong> <div style="min-height: 120px;" class="border d-flex m-2 flex-wrap flex-content-end"> <div class="p-5 border color-bg-accent-emphasis"> First Item </div> <div class="p-5 border color-bg-success-emphasis"> Second Item </div> <div class="p-5 border color-bg-danger-emphasis"> Third Item </div> <div class="p-5 border color-bg-accent"> Fourth Item </div> <div class="p-5 border color-bg-success"> Fifth Item </div> <div class="p-5 border color-bg-danger"> Sixth Item </div> </div> </body> </html>
Producción:
Primer CSS Flexbox Alinear contenido
Ejemplo 2: Este ejemplo demuestra el Primer CSS Flexbox Align Content.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Align Content </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 Flexbox Align Content </h4> <br> <strong> Flexbox flex-content-between Class </strong> <div style="min-height: 120px;" class="border d-flex m-2 flex-wrap flex-content-between"> <div class="p-5 border color-bg-accent-emphasis"> First Item </div> <div class="p-5 border color-bg-success-emphasis"> Second Item </div> <div class="p-5 border color-bg-danger-emphasis"> Third Item </div> <div class="p-5 border color-bg-accent"> Fourth Item </div> <div class="p-5 border color-bg-success"> Fifth Item </div> <div class="p-5 border color-bg-danger"> Sixth Item </div> </div> <br> <strong> Flexbox flex-content-around Class </strong> <div style="min-height: 120px;" class="border d-flex m-2 flex-wrap flex-content-around"> <div class="p-5 border color-bg-accent-emphasis"> First Item </div> <div class="p-5 border color-bg-success-emphasis"> Second Item </div> <div class="p-5 border color-bg-danger-emphasis"> Third Item </div> <div class="p-5 border color-bg-accent"> Fourth Item </div> <div class="p-5 border color-bg-success"> Fifth Item </div> <div class="p-5 border color-bg-danger"> Sixth Item </div> </div> <br> <strong> Flexbox flex-content-stretch Class </strong> <div style="min-height: 120px;" class="border d-flex m-2 flex-wrap flex-content-stretch"> <div class="p-5 border color-bg-accent-emphasis"> First Item </div> <div class="p-5 border color-bg-success-emphasis"> Second Item </div> <div class="p-5 border color-bg-danger-emphasis"> Third Item </div> <div class="p-5 border color-bg-accent"> Fourth Item </div> <div class="p-5 border color-bg-success"> Fifth Item </div> <div class="p-5 border color-bg-danger"> Sixth Item </div> </div> </body> </html>
Producción:
Primer CSS Flexbox Alinear contenido
Referencia: https://primer.style/css/utilities/flexbox#align-content
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA