Primer CSS es un marco CSS gratuito de código abierto basado en principios que sientan las bases para los elementos de diseño básicos como el espaciado, el tipo de letra y el color. Este enfoque riguroso garantiza que nuestros patrones sean consistentes e interoperables.
Primer CSS Flexbox:
- Contenedor flexible : el contenedor flexible se usa para hacer un diseño de elemento y su contenido usando el modelo de caja flexible. Cada hijo directo del contenedor flexible se convertirá en un elemento flexible.
- Dirección flexible : la dirección flexible se usa para establecer la dirección de los elementos flexibles en el cuadro flexible.
- Envoltura flexible: la envoltura flexible se usa para colocar artículos flexibles en una sola línea o envueltos en varias líneas.
- Justificar contenido: las clases de Justificar contenido se utilizan para distribuir el espacio entre y alrededor de elementos flexibles a lo largo del eje principal del contenedor.
- Alinear elementos: Esto se usa para alinear el elemento del cuadro flexible.
- Alinear contenido: Alinear contenido se usa para crear múltiples líneas de eje principal y agrega espacio adicional en el eje transversal.
- Flex: las clases Flex se utilizan para definir la capacidad de un elemento flexible para modificar sus dimensiones para llenar el espacio disponible.
- Align self: las clases Align Self se utilizan para ajustar la alineación de un elemento flexible individual en el eje transversal.
- Orden : las clases de orden se utilizan para definir el orden de los elementos flexibles, ya que podemos ordenarlos según nuestras necesidades.
- Utilidades flexibles receptivas: las utilidades flexibles receptivas brindan un modelo de diseño unidimensional flexible y receptivo que tiene diseños eficientes con espacios distribuidos entre los elementos dentro de un contenedor.
- Componentes de ejemplo : los componentes de ejemplo se utilizan para crear los diversos componentes en Primer CSS utilizando las clases de flexbox.
Ejemplo 1: El siguiente código demuestra la clase de fila flexible que cambia la dirección del eje de izquierda a derecha.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Flex </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 </h4> <strong>Flexbox row</strong> <br> <div class="border d-flex flex-column flex-sm-row"> <div class="p-5 border color-bg-subtle">Item 1</div> <div class="p-5 border color-bg-subtle">Item 2</div> <div class="p-5 border color-bg-subtle">Item 3</div> </div> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente código demuestra la clase flex-row-reverse que cambia la dirección del eje de derecha a izquierda.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Flex </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 </h4> <strong>Flexbox row-reverse</strong> <br> <div class="border d-flex flex-column flex-sm-row-reverse"> <div class="p-5 border color-bg-subtle">Item 1</div> <div class="p-5 border color-bg-subtle">Item 2</div> <div class="p-5 border color-bg-subtle">Item 3</div> </div> </div> </body> </html>
Producción:
Ejemplo 3: El siguiente código demuestra la clase de columna flexible que cambia la dirección del eje de arriba a abajo.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Flex </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 </h4> <strong>Flexbox column</strong> <br> <div class="border d-flex flex-column"> <div class="p-5 border color-bg-subtle">Item 1</div> <div class="p-5 border color-bg-subtle">Item 2</div> <div class="p-5 border color-bg-subtle">Item 3</div> </div> </body> </html>
Producción:
Ejemplo 4: El siguiente código demuestra la clase flex-column-reverse que cambia la dirección del eje de abajo hacia arriba.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Flex </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 </h4> <strong>Flexbox column-reverse</strong> <br> <div class="border d-flex flex-column-reverse"> <div class="p-5 border color-bg-subtle">Item 1</div> <div class="p-5 border color-bg-subtle">Item 2</div> <div class="p-5 border color-bg-subtle">Item 3</div> </div> </div> </body> </html>
Producción:
Ejemplo 5: El siguiente ejemplo demuestra la clase flex-wrap que envuelve la línea en múltiples líneas.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Flex </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 </h4> <strong>Flexbox Wrap</strong> <br> <div class="border d-flex flex-wrap"> <div class="p-5 px-6 border color-bg-subtle">A</div> <div class="p-5 px-6 border color-bg-subtle">B</div> <div class="p-5 px-6 border color-bg-subtle">C</div> <div class="p-5 px-6 border color-bg-subtle">D</div> <div class="p-5 px-6 border color-bg-subtle">E</div> <div class="p-5 px-6 border color-bg-subtle">F</div> <div class="p-5 px-6 border color-bg-subtle">G</div> <div class="p-5 px-6 border color-bg-subtle">H</div> <div class="p-5 px-6 border color-bg-subtle">I</div> <div class="p-5 px-6 border color-bg-subtle">J</div> <div class="p-5 px-6 border color-bg-subtle">K</div> <div class="p-5 px-6 border color-bg-subtle">L</div> <div class="p-5 px-6 border color-bg-subtle">M</div> <div class="p-5 px-6 border color-bg-subtle">N</div> </div> </div> </body> </html>
Producción:
Ejemplo 6: El siguiente código demuestra la clase flex-nowrap .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Flex </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 </h4> <strong>Flexbox NoWrap</strong> <br> <div class="border d-flex flex-nowrap"> <div class="p-5 px-6 border color-bg-subtle">A</div> <div class="p-5 px-6 border color-bg-subtle">B</div> <div class="p-5 px-6 border color-bg-subtle">C</div> <div class="p-5 px-6 border color-bg-subtle">D</div> <div class="p-5 px-6 border color-bg-subtle">E</div> <div class="p-5 px-6 border color-bg-subtle">F</div> <div class="p-5 px-6 border color-bg-subtle">I</div> <div class="p-5 px-6 border color-bg-subtle">J</div> <div class="p-5 px-6 border color-bg-subtle">K</div> <div class="p-5 px-6 border color-bg-subtle">L</div> <div class="p-5 px-6 border color-bg-subtle">M</div> <div class="p-5 px-6 border color-bg-subtle">N</div> <div class="p-5 px-6 border color-bg-subtle">O</div> <div class="p-5 px-6 border color-bg-subtle">P</div> <div class="p-5 px-6 border color-bg-subtle">Q</div> </div> </body> </html>
Producción:
Ejemplo 7: El siguiente código demuestra la clase flex-wrap-reverse .
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Flex </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 </h4> <strong>Flexbox wrap reverse</strong> <br> <div class="border d-flex flex-wrap-reverse"> <div class="p-5 px-6 border color-bg-subtle">A</div> <div class="p-5 px-6 border color-bg-subtle">B</div> <div class="p-5 px-6 border color-bg-subtle">C</div> <div class="p-5 px-6 border color-bg-subtle">D</div> <div class="p-5 px-6 border color-bg-subtle">E</div> <div class="p-5 px-6 border color-bg-subtle">F</div> <div class="p-5 px-6 border color-bg-subtle">I</div> <div class="p-5 px-6 border color-bg-subtle">J</div> <div class="p-5 px-6 border color-bg-subtle">K</div> <div class="p-5 px-6 border color-bg-subtle">L</div> <div class="p-5 px-6 border color-bg-subtle">M</div> <div class="p-5 px-6 border color-bg-subtle">N</div> <div class="p-5 px-6 border color-bg-subtle">O</div> <div class="p-5 px-6 border color-bg-subtle">P</div> <div class="p-5 px-6 border color-bg-subtle">Q</div> </div> </body> </html>
Producción:
Ejemplo 8: El siguiente código demuestra la clase d-flex que hace que el elemento se comporte como un bloque.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Flex </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 </h4> <strong>Flexbox d-flex</strong> <br> <div class="border d-flex"> <div class="p-5 border color-bg-subtle">flex item 1</div> <div class="p-5 border color-bg-subtle">flex item 2</div> <div class="p-5 border color-bg-subtle">flex item 3</div> </div> <div class="border d-flex"> <div class="p-5 border color-bg-subtle">flex item 1</div> <div class="p-5 border color-bg-subtle">flex item 2</div> <div class="p-5 border color-bg-subtle">flex item 3</div> </div> </body> </html>
Producción:
Ejemplo 9: El siguiente código demuestra la clase d-inline-flex que hace que el elemento se comporte en línea.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Flexbox Flex </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 </h4> <strong>Flexbox d-inline-flex</strong> <br> <div class="border d-inline-flex"> <div class="p-5 border color-bg-subtle">flex item 1</div> <div class="p-5 border color-bg-subtle">flex item 2</div> <div class="p-5 border color-bg-subtle">flex item 3</div> </div> <div class="border d-inline-flex"> <div class="p-5 border color-bg-subtle">flex item 1</div> <div class="p-5 border color-bg-subtle">flex item 2</div> <div class="p-5 border color-bg-subtle">flex item 3</div> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/utilities/flexbox
Publicación traducida automáticamente
Artículo escrito por nitinpatelco20b540 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA