Cartilla CSS Flexbox

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *