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-direction se usa para establecer la dirección de los elementos flexibles en el flexbox. La dirección se definirá de dos maneras, columna o fila, y estas también se pueden invertir. Hay algunas clases que se pueden usar para establecer la dirección de los elementos flexibles que se mencionan y describen a continuación.
Primer CSS Flexbox Flex Direcciones Clases:
- columna flexible: esta clase se utiliza para establecer la dirección de arriba a abajo de los elementos flexibles.
- flex-column-reverse: esta clase se usa para establecer la dirección de abajo a arriba de los elementos flexibles.
- fila flexible: esta clase se usa para configurar los elementos flexibles de izquierda a derecha.
- flex-row-reverse: esta clase se usa para configurar los elementos flexibles de derecha a izquierda.
Sintaxis:
<div class="border d-flex flex-row">
...
</div>
Ejemplo 1: a continuación se muestran ejemplos que ilustran la dirección flexible de Primer CSS Flexbox utilizando las clases flex-column y flex-column-reverse .
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 Direction </h4> <strong>Flexbox Container flex-column Class:</strong> <br> <div class="border d-flex flex-column m-2 color-bg-accent"> <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-emphasis"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-danger-emphasis"> </div> </div> <strong>Flexbox Container flex-column-reverse Class:</strong> <br> <div class="border d-flex flex-column-reverse m-2 color-bg-accent"> <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-emphasis"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-danger-emphasis"> </div> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente código muestra las clases flex-row y flex-row-reverse .
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 Direction </h4> <strong>Flexbox Container flex-row Class:</strong> <br> <div class="border d-flex flex-row m-2 color-bg-accent"> <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-emphasis"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-danger-emphasis"> </div> </div> <strong>Flexbox Container flex-row-reverse Class:</strong> <br> <div class="border d-flex flex-row-reverse m-2 color-bg-accent"> <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-emphasis"> </div> <div class="m-2 p-5 border color-border-success-emphasis color-bg-danger-emphasis"> </div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/flexbox#flex-direction
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA