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 Alinear elementos utilizados para alinear elementos en el eje transversal. El eje transversal siempre discurre perpendicular al eje principal. Estas clases se utilizan para definir la posición de los elementos flexibles según el eje transversal.
Primer CSS Flexbox Align Items Clases:
- flex-items-start: esta clase se utiliza para alinear elementos flexibles al inicio del eje transversal.
- flex-items-end: esta clase se usa para alinear elementos flexibles al final del eje transversal
- flex-items-center: esta clase se usa para alinear elementos flexibles con el centro del eje transversal
- flex-items-baseline: esta clase se usa para alinear elementos flexibles a lo largo de su línea de base.
- flex-items-stretch: esta clase se usa para estirar elementos flexibles desde el inicio del eje transversal hasta el final del eje transversal.
Sintaxis: en esta sintaxis, usaremos solo una clase, se pueden usar otras clases como reemplazo.
<div class="border d-flex flex-items-start">
...
</div>
Ejemplo 1: Este ejemplo demuestra el uso de Primer CSS Flexbox Align Items.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Align 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 Align Items </h4> <strong>Flexbox flex-items-start Class:</strong> <br> <div class="border d-flex m-2 flex-items-start" style="min-height: 150px;"> <div class="p-5 border 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-items-end Class:</strong> <br> <div class="border d-flex m-2 flex-items-end" style="min-height: 150px;"> <div class="p-5 border 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-items-center Class:</strong> <br> <div class="border d-flex m-2 flex-items-center" style="min-height: 150px;"> <div class="p-5 border 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 Alinear elementos
Ejemplo 2: Este es otro ejemplo que demuestra el uso de Primer CSS Flexbox Align Items.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Align 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 Align Items </h4> <strong>Flexbox flex-items-baseline Class:</strong> <br> <div class="border d-flex m-2 flex-items-baseline" style="min-height: 150px;"> <div class="p-5 border 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-items-stretch Class:</strong> <br> <div class="border d-flex m-2 flex-items-stretch" style="min-height: 150px;"> <div class="p-5 border 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 Alinear elementos
Referencia: https://primer.style/css/utilities/flexbox#align-items
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA