Flexbox - Guía rápida

CAscading Style Sheets (CSS) es un lenguaje de diseño simple destinado a simplificar el proceso de hacer que las páginas web sean presentables. CSS maneja la apariencia de una página web.

Con CSS, puede controlar el color del texto, el estilo de las fuentes, el espacio entre párrafos, el tamaño y la disposición de las columnas, qué imágenes de fondo o colores se utilizan, diseños de diseño, variaciones en la visualización para diferentes dispositivos y tamaños de pantalla. así como una variedad de otros efectos.

Para determinar la posición y las dimensiones de los cuadros, en CSS, puede utilizar uno de los modos de diseño disponibles:

The block layout - Este modo se utiliza para diseñar documentos.
The inline layout - Este modo se utiliza para diseñar texto.
The table layout - Este modo se utiliza para diseñar tablas.
The table layout - Este modo se utiliza para posicionar los elementos.

Todos estos modos se utilizan para alinear elementos específicos como documentos, texto, tablas, etc., sin embargo, ninguno de ellos proporciona una solución completa para diseñar sitios web complejos. Inicialmente, esto se suele hacer mediante una combinación de elementos flotantes, elementos posicionados y diseño de tabla (a menudo). Pero los flotadores solo permiten colocar las cajas horizontalmente.

¿Qué es Flexbox?

Además de los modos mencionados anteriormente, CSS3 proporciona otro modo de diseño Caja flexible, comúnmente llamado como Flexbox.

Con este modo, puede crear fácilmente diseños para aplicaciones y páginas web complejas. A diferencia de los flotadores, el diseño de Flexbox brinda un control completo sobre la dirección, alineación, orden y tamaño de las cajas.

Características de Flexbox

Las siguientes son las características notables del diseño de Flexbox:

Direction - Puede organizar los elementos en una página web en cualquier dirección, como de izquierda a derecha, de derecha a izquierda, de arriba a abajo y de abajo a arriba.
Order - Con Flexbox, puede reorganizar el orden de los contenidos de una página web.
Wrap - En caso de espacio inconsistente para el contenido de una página web (en una sola línea), puede envolverlos en varias líneas (tanto horizontalmente) como verticalmente.
Alignment - Con Flexbox, puede alinear el contenido de la página web con respecto a su contenedor.
Resize - Con Flexbox, puede aumentar o disminuir el tamaño de los elementos de la página para que quepan en el espacio disponible.

Navegadores compatibles

A continuación se muestran los navegadores compatibles con Flexbox.

Chrome 29+
Firefox 28+
Internet Explorer 11+
Opera 17+
Safari 6.1+
Android 4.4 o superior
iOS 7.1 o superior

Para usar Flexbox en su aplicación, necesita crear / definir un contenedor flexible usando el display propiedad.

Usage -

display: flex | inline-flex

Esta propiedad acepta dos valores

flex - Genera un contenedor flexible a nivel de bloque.
inline-flex - Genera una caja contenedor flexible en línea.

Ahora veremos cómo utilizar el display propiedad con ejemplos.

Flexionar

Al pasar este valor a la propiedad de visualización, se creará un contenedor flexible a nivel de bloque. Ocupa todo el ancho del contenedor principal (navegador).

El siguiente ejemplo demuestra cómo crear un contenedor flexible a nivel de bloque. Aquí, estamos creando seis cajas con diferentes colores y hemos utilizado el contenedor flexible para sujetarlas.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:flex;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

Dado que le hemos dado el valor flex al display propiedad, el contenedor utiliza el ancho del contenedor (navegador).

Puede observar esto agregando un borde al contenedor como se muestra a continuación.

.container {
   display:inline-flex;
   border:3px solid black;
}

Producirá el siguiente resultado:

Flexión en línea

Al pasar este valor al displaypropiedad, se creará un contenedor flexible de nivel en línea. Simplemente ocupa el lugar requerido para el contenido.

El siguiente ejemplo demuestra cómo crear un contenedor flexible en línea. Aquí, estamos creando seis cajas con diferentes colores y hemos utilizado el contenedor inline-flex para guardarlas.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:inline-flex;
         border:3px solid black;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

Dado que hemos utilizado un contenedor flexible en línea, solo tomó el espacio necesario para envolver sus elementos.

los flex-direction La propiedad se utiliza para especificar la dirección en la que se necesitan colocar los elementos del contenedor flexible (elementos flexibles).

usage -

flex-direction: row | row-reverse | column | column-reverse

Esta propiedad acepta cuatro valores:

row - Organiza los elementos del contenedor horizontalmente de izquierda a derecha.
row-reverse - Organiza los elementos del contenedor horizontalmente de derecha a izquierda.
column - Organiza los elementos del contenedor verticalmente de izquierda a derecha.
column-reverse - Organiza los elementos del contenedor verticalmente de derecha a izquierda.

Ahora, tomaremos algunos ejemplos para demostrar el uso de la direction propiedad.

fila

Al pasar este valor al direction propiedad, los elementos del contenedor están dispuestos horizontalmente de izquierda a derecha como se muestra a continuación.

El siguiente ejemplo demuestra el resultado de pasar el valor rowa la propiedad flex-direction . Aquí, estamos creando seis cajas con diferentes colores con el valor de dirección flexiblerow.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:row;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

reversa

Al pasar este valor al direction propiedad, los elementos del contenedor están dispuestos horizontalmente de derecha a izquierda como se muestra a continuación.

El siguiente ejemplo demuestra el resultado de pasar el valor row-reversea la propiedad flex-direction . Aquí, estamos creando seis cajas con diferentes colores con el valor de dirección flexiblerow-reverse.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:row-reverse;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

columna

Al pasar este valor al direction propiedad, los elementos del contenedor están dispuestos verticalmente de arriba a abajo como se muestra a continuación.

El siguiente ejemplo demuestra el resultado de pasar el valor columna la propiedad flex-direction . Aquí, estamos creando seis cajas con diferentes colores con el valor de dirección flexiblecolumn.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:column;
      }
   </style>
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

columna inversa

Al pasar este valor al direction propiedad, los elementos del contenedor están dispuestos verticalmente de abajo hacia arriba como se muestra a continuación.

El siguiente ejemplo demuestra el resultado de pasar el valor column-reversea la propiedad flex-direction . Aquí, estamos creando seis cajas con diferentes colores con el valor de dirección flexiblecolumn-reverse.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:column-reverse;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

Generalmente, en caso de espacio insuficiente para el contenedor, el resto de los elementos flexibles se ocultarán como se muestra a continuación.

los flex-wrap La propiedad se usa para especificar los controles si el contenedor flexible es de una sola línea o de varias líneas.

usage -

flex-wrap: nowrap | wrap | wrap-reverse
flex-direction: column | column-reverse

Esta propiedad acepta los siguientes valores:

wrap - En caso de que no haya suficiente espacio para ellos, los elementos del contenedor (flexitems) se envolverán en líneas flexibles adicionales de arriba a abajo.
wrap-reverse - En caso de que no haya suficiente espacio para ellos, los elementos del contenedor (elementos flexibles) se envolverán en líneas flexibles adicionales de abajo hacia arriba.

Ahora veremos cómo utilizar el wrap propiedad, con ejemplos.

envolver

Al pasar el valor wrap a la propiedad flex-wrap, los elementos del contenedor están dispuestos horizontalmente de izquierda a derecha como se muestra a continuación.

El siguiente ejemplo demuestra el resultado de pasar el valor wrapa la propiedad flex-wrap . Aquí, estamos creando seis cajas con diferentes colores con el valor de dirección flexiblerow.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:row;
         flex-wrap:wrap;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

envolver-revertir

Al pasar el valor wrap-reverse a la propiedad flex-wrap, los elementos del contenedor están dispuestos horizontalmente de izquierda a derecha como se muestra a continuación.

El siguiente ejemplo demuestra el resultado de pasar el valor wrap-reversea la propiedad flex-wrap . Aquí, estamos creando seis cajas con diferentes colores con el valor de dirección flexiblerow.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:row;
         flex-wrap:wrap-reverse;
      }
   </style>
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

envolver (columna)

Al pasar el valor wrap a la propiedad flex-wrap y el valor column a la propiedad flex-direction, los elementos del contenedor están dispuestos horizontalmente de izquierda a derecha como se muestra a continuación.

El siguiente ejemplo demuestra el resultado de pasar el valor wrap al flex-wrappropiedad. Aquí, estamos creando seis cajas con diferentes colores con el valor de dirección flexiblecolumn.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:column;
         flex-wrap:wrap;
         height:100vh;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

wrap-reverse (columna)

Al pasar el valor wrap-reverse a la propiedad flex-wrap y el valor column a la propiedad flex-direction, los elementos del contenedor están dispuestos horizontalmente de izquierda a derecha como se muestra a continuación.

El siguiente ejemplo demuestra el resultado de pasar el valor wrap-reversea la propiedad flex-wrap . Aquí, estamos creando seis cajas con diferentes colores y con el valor de dirección flexiblecolumn.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:column;
         flex-wrap:wrap-reverse;
         height:100vh;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

A menudo, puede observar un espacio adicional que queda en el contenedor después de organizar los elementos flexibles como se muestra a continuación.

Usando la propiedad justify-content, puede alinear el contenido a lo largo del eje principal distribuyendo el espacio adicional según lo previsto. También puede ajustar la alineación de los elementos flexibles, en caso de que desborden la línea.

usage -

justify-content: flex-start | flex-end | center | space-between | space-around| space-evenly;

Esta propiedad acepta los siguientes valores:

flex-start - Los elementos flexibles se colocan al inicio del contenedor.
flex-end - Los artículos flexibles se colocan al final del contenedor.
center - Los elementos flexibles se colocan en el centro del contenedor, donde el espacio extra se distribuye por igual al inicio y al final de los elementos flexibles.
space-between - El espacio extra se distribuye por igual entre los elementos flexibles.
space-around - El espacio extra se distribuye equitativamente entre los elementos flexibles de modo que el espacio entre los bordes del contenedor y su contenido sea la mitad del espacio entre los elementos flexibles.

Ahora, veremos cómo usar la propiedad justify-content, con ejemplos.

inicio flexible

Al pasar este valor a la propiedad justify-content, los elementos flexibles se colocan al comienzo del contenedor.

El siguiente ejemplo demuestra el resultado de pasar el valor flex-start al justify-content propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

extremo flexible

Al pasar este valor a la propiedad justify-content, los elementos flexibles se colocan al final del contenedor.

El siguiente ejemplo demuestra el resultado de pasar el valor flex-end al justify-content propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:flex-end;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

centrar

Al pasar este valor a la propiedad justify-content, los elementos flexibles se colocan en el centro del contenedor, donde el espacio adicional se distribuye por igual al inicio y al final de los elementos flexibles.

El siguiente ejemplo demuestra el resultado de pasar el valor center al justify-content propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:center;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

espacio entre

Al pasar este valor a la propiedad justify-content, el espacio extra se distribuye equitativamente entre los elementos flexibles de modo que el espacio entre dos elementos flexibles sea el mismo y el inicio y el final de los elementos flexibles toquen los bordes del contenedor.

El siguiente ejemplo demuestra el resultado de pasar el valor space-between al justify-content propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:space-between;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

espacio alrededor

Al pasar este valor a la propiedad justify-content, el espacio extra se distribuye equitativamente entre los elementos flexibles de modo que el espacio entre dos elementos flexibles sea el mismo. Sin embargo, el espacio entre los bordes del contenedor y su contenido (el inicio y el final de los elementos flexibles) es la mitad del espacio entre los elementos flexibles.

El siguiente ejemplo demuestra el resultado de pasar el valor space-around al justify-content propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:space-around;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

espacio uniforme

El siguiente ejemplo demuestra el resultado de pasar el valor space-evenly al justify-content propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:space-evenly;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

los align-items la propiedad es la misma que justify content. Pero aquí, los elementos se alinearon a través del acceso cruzado (verticalmente).

Usage -

align-items: flex-start | flex-end | center | baseline | stretch;

Esta propiedad acepta los siguientes valores:

flex-start - Los elementos flexibles se alinearon verticalmente en la parte superior del contenedor.
flex-end - Los elementos flexibles se alinearon verticalmente en la parte inferior del contenedor.
flex-center - Los elementos flexibles se alinearon verticalmente en el centro del contenedor.
stretch - Los elementos flexibles se alinearon verticalmente de manera que llenen todo el espacio vertical del contenedor.
baseline - Los elementos flexibles se alinearon de manera que la línea base de su texto se alineara a lo largo de una línea horizontal.

inicio flexible

Al pasar este valor a la propiedad align-items, los elementos flexibles se alinearon verticalmente en la parte superior del contenedor.

El siguiente ejemplo demuestra el resultado de pasar el valor flex-start al align-items propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

extremo flexible

Al pasar este valor a la propiedad align-items, los elementos flexibles se alinean verticalmente en la parte inferior del contenedor.

El siguiente ejemplo demuestra el resultado de pasar el valor flex-end al align-items propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:flex-end;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

centrar

Al pasar este valor a la propiedad align-items, los elementos flexibles están alineados verticalmente en el centro del contenedor.

El siguiente ejemplo demuestra el resultado de pasar el valor flex-center al align-items propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:center;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

tramo

Al pasar este valor a la propiedad align-items, los elementos flexibles están alineados verticalmente de modo que llenen todo el espacio vertical del contenedor.

El siguiente ejemplo demuestra el resultado de pasar el valor stretch al align-items propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:stretch;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

base

Al pasar este valor a la propiedad align-items, los elementos flexibles se alinean de modo que la línea de base de su texto se alinee a lo largo de una línea horizontal.

El siguiente ejemplo demuestra el resultado de pasar el valor baseline al align-items propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:baseline;
      }
   </style>
   
   <body>
      <div class = "container">
      <div class = "box box1">One</div>
      <div class = "box box2">two</div>
      <div class = "box box3">three</div>
      <div class = "box box4">four</div>
      <div class = "box box5">five</div>
      <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

En caso de que el contenedor flexible tenga varias líneas (cuando, flex-wrap: wrap), la propiedad align-content define la alineación de cada línea dentro del contenedor.

Usage -

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Esta propiedad acepta los siguientes valores:

stretch - Las líneas en el contenido se estirarán para llenar el espacio restante.
flex-start - Todas las líneas del contenido se empaquetan al inicio del contenedor.
flex-end - Todas las líneas del contenido se empaquetan al final del contenedor.
center - Todas las líneas del contenido se empaquetan en el centro del contenedor.
space-between - El espacio extra se distribuye entre las líneas de manera uniforme.
space-around - El espacio adicional se distribuye entre las líneas de manera uniforme con el mismo espacio alrededor de cada línea (incluidas la primera y la última línea)

centrar

Al pasar este valor a la propiedad align-content, todas las líneas se empaquetan en el centro del contenedor.

El siguiente ejemplo demuestra el resultado de pasar el valor center al align-content propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:43%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:center;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

inicio flexible

Al pasar este valor a la propiedad align-content, todas las líneas se empaquetan al inicio del contenedor.

El siguiente ejemplo demuestra el resultado de pasar el valor flex-start al align-content propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

extremo flexible

Al pasar este valor a la propiedad align-content, todas las líneas se empaquetan al final del contenedor.

El siguiente ejemplo demuestra el resultado de pasar el valor flex-end al align-content propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:flex-end;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

tramo

Al pasar este valor a la propiedad align-content, las líneas se estirarán para llenar el espacio restante.

El siguiente ejemplo demuestra el resultado de pasar el valor stretch al align-content propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:stretch;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

espacio alrededor

Al pasar este valor a la propiedad align-content, el espacio adicional se distribuye entre las líneas de manera uniforme con el mismo espacio alrededor de cada línea (incluidas la primera y la última línea).

El siguiente ejemplo demuestra el resultado de pasar el valor space-around al align-content propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:space-around;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

espacio entre

Al pasar este valor a la propiedad align-content, el espacio extra se distribuye entre las líneas de manera uniforme, donde la primera línea estará en la parte superior y la última línea estará en la parte inferior del contenedor.

El siguiente ejemplo demuestra el resultado de pasar el valor space-between al align-content propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:space-between;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

los flex-order La propiedad se utiliza para definir el orden del elemento flexbox.

El siguiente ejemplo demuestra la orderpropiedad. Aquí estamos creando seis cajas de colores con las etiquetas uno, dos, tres, cuatro, cinco, seis, dispuestas en el mismo orden, y las estamos reordenando en el orden uno, dos, cinco, seis, tres, cuatro, usando el propiedad de orden flexible.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:35px;
         padding:15px;
      }
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red; order:1}
      .box4{background:magenta; order:2}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:rows;
         flex-wrap:wrap;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

- ve ordenando

También puede asignar valores –ve al orden como se muestra a continuación.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:35px;
         padding:15px;
      }
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red; order:-1}
      .box4{background:magenta; order:-2}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:row;
         flex-wrap:wrap;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

base flexible

Usamos el flex-basis propiedad para definir el tamaño predeterminado del elemento flexible antes de que se distribuya el espacio.

El siguiente ejemplo demuestra el uso de la propiedad de base flexible. Aquí estamos creando 3 cajas de colores y fijando su tamaño a 150 px.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-basis:150px; }
      .box2{background:blue; flex-basis:150px;}
      .box3{background:red; flex-basis:150px;}
      
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

crecimiento flexible

Usamos el flex-grow propiedad para establecer el flex-growfactor. En caso de exceso de espacio en el contenedor, especifica cuánto debe crecer un elemento flexible en particular.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-grow:10; flex-basis:100px; }
      .box2{background:blue; flex-grow:1; flex-basis:100px; }
      .box3{background:red; flex-grow:1; flex-basis:100px; }
      
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

flexión-encogimiento

Usamos la propiedad flex-shrink que se usa para establecer la flexión shrink-factor. En caso de que no haya suficiente espacio en el contenedor, especifica cuánto debe encogerse un elemento flexible.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-basis:200px; flex-shrink:10}
      .box2{background:blue; flex-basis:200px; flex-shrink:1}
      .box3{background:red; flex-basis:200px; flex-shrink:1}
      
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

flexionar

Existe una forma abreviada de establecer valores para estas tres propiedades a la vez; se llamaflex. Con esta propiedad, puede establecer valores para flex-grow, flex-shrink y valores de base flexible a la vez. Aquí está la sintaxis de esta propiedad.

.item {
   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Esta propiedad es similar a align-items, pero aquí se aplica a elementos flexibles individuales.

Usage -

align-self: auto | flex-start | flex-end | center | baseline | stretch;

Esta propiedad acepta los siguientes valores:

flex-start - El artículo flexible se alineará verticalmente en la parte superior del contenedor.
flex-end - El artículo flexible se alineará verticalmente en la parte inferior del contenedor.
flex-center - El artículo flexible se alineará verticalmente en el centro del contenedor.
Stretch - El elemento flexible se alineará verticalmente de manera que ocupe todo el espacio vertical del contenedor.
baseline - El elemento flexible se alineará en la línea base del eje transversal.

inicio flexible

Al pasar este valor a la propiedad align-self, un elemento flexible particular se alineará verticalmente en la parte superior del contenedor.

El siguiente ejemplo demuestra el resultado de pasar el valor flex-start al align-self propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:start;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

extremo flexible

Al pasar este valor a la propiedad align-self, un elemento flexible en particular se alineará verticalmente en la parte inferior del contenedor.

El siguiente ejemplo demuestra el resultado de pasar el valor flex-end al align-self propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:flex-end;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

centrar

Al pasar el valor center a la propiedad align-self, un elemento flexible en particular se alineará verticalmente en el centro del contenedor.

El siguiente ejemplo demuestra el resultado de pasar el valor center al align-self propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:center;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

tramo

Al pasar este valor a la propiedad align-self, un elemento flexible en particular, se alineará verticalmente de modo que llene todo el espacio vertical del contenedor.

El siguiente ejemplo demuestra el resultado de pasar el valor de extensión a la align-self propiedad.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:stretch;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Producirá el siguiente resultado:

↰ Previous page