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í.
Las clases Primer CSS Flexbox Align Self se utilizan para ajustar la alineación de un elemento flexible individual en el eje transversal. Si se aplica alguna propiedad de elemento de alineación, estas clases se sobrescribirán en esas propiedades. Hay seis tipos de clases Align Self en Primer CSS como se describe a continuación.
Primer CSS Flexbox Align Self Classes:
- flex-self-auto: esta clase se usa para alinear elementos flexibles específicos de acuerdo con el padre.
- flex-self-start: esta clase se utiliza para alinear elementos flexibles específicos al inicio del eje transversal.
- flex-self-end: esta clase se usa para alinear elementos flexibles específicos al final del eje transversal.
- flex-self-center: esta clase se utiliza para alinear elementos flexibles específicos con el centro del eje transversal.
- flex-self-baseline: esta clase se utiliza para alinear elementos flexibles específicos con la línea de base del eje transversal.
- flex-self-stretch: esta clase se usa para estirar elementos flexibles específicos desde el inicio del eje transversal hasta el final del eje transversal.
Sintaxis:
<div class="border d-flex ">
<div class="Flexbox-Align-Self-Class">
...
</div>
...
</div>
Ejemplo 1: Este ejemplo demuestra el uso de Primer CSS Flexbox Align Self usando las clases flex-self-start, flex-self-end y flex-self-center .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Align Self </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 Self </h4> <strong>Flexbox flex-self-start Class:</strong> <br> <div class="border d-flex m-2 " style="min-height: 150px;"> <div class="p-5 border flex-self-start color-bg-accent-emphasis"> Flex item 1 </div> <div class="p-5 border color-bg-success-emphasis"> Flex item 2 </div> <div class="p-5 border color-bg-danger-emphasis"> Flex item 3 </div> </div> <strong>Flexbox flex-self-end Class:</strong> <br> <div class="border d-flex m-2 " style="min-height: 150px;"> <div class="p-5 border flex-self-end color-bg-accent-emphasis"> Flex item 1 </div> <div class="p-5 border color-bg-success-emphasis"> Flex item 2 </div> <div class="p-5 border color-bg-danger-emphasis"> Flex item 3 </div> </div> <strong>Flexbox flex-self-center Class:</strong> <br> <div class="border d-flex m-2 " style="min-height: 150px;"> <div class="p-5 border flex-self-center color-bg-accent-emphasis"> Flex item 1 </div> <div class="p-5 border color-bg-success-emphasis"> Flex item 2 </div> <div class="p-5 border color-bg-danger-emphasis"> Flex item 3 </div> </div> </body> </html>
Producción:
Primer CSS Flexbox Align Self
Ejemplo 2: Este ejemplo demuestra el uso de Primer CSS Flexbox Align Self usando las clases flex-self-baseline, flex-self-stretch y flex-self-auto .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Self Items </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 Self Items </h4> <strong>Flexbox flex-self-baseline Class:</strong> <br> <div style="min-height: 150px;" class="border d-flex flex-items-end m-2"> <div class="p-5 border color-bg-accent-emphasis flex-self-baseline"> Flex item 1 </div> <div class="p-5 border color-bg-success-emphasis"> Flex item 2 </div> <div class="p-5 border color-bg-danger-emphasis"> Flex item 3 </div> </div> <strong>Flexbox flex-self-stretch Class:</strong> <br> <div style="min-height: 150px;" class="border d-flex flex-items-end m-2"> <div class="p-5 border color-bg-accent-emphasis flex-self-stretch"> Flex item 1 </div> <div class="p-5 border color-bg-success-emphasis"> Flex item 2 </div> <div class="p-5 border color-bg-danger-emphasis"> Flex item 3 </div> </div> <strong>Flexbox flex-self-auto Class:</strong> <br> <div style="min-height: 150px;" class="border d-flex flex-items-end m-2"> <div class="p-5 border color-bg-accent-emphasis flex-self-auto"> Flex item 1 </div> <div class="p-5 border color-bg-success-emphasis"> Flex item 2 </div> <div class="p-5 border color-bg-danger-emphasis"> Flex item 3 </div> </div> </body> </html>
Producción:
Primer CSS Flexbox Align Self
Referencia: https://primer.style/css/utilities/flexbox#align-self
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA