CSS3 Flexbox
Cajas flexibles, o flexbox , es un nuevo modo de diseño en CSS3.
El uso de flexbox asegura que los elementos se comportan de manera predecible cuando el diseño de la página debe adaptarse a los diferentes tamaños de pantalla y diferentes dispositivos de visualización.
Para muchas aplicaciones, el modelo de caja flexible proporciona una mejora sobre el modelo de bloques en que no utiliza flotadores, ni márgenes colapso del recipiente flex con los márgenes de su contenido.
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la característica.
Los números seguidos por -webkit- o -moz- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| Basic support (single-line flexbox) |
29.0 21.0 -webkit- |
11.0 | 22.0 18.0 -moz- |
6.1 -webkit- | 12.1 -webkit- |
| Multi-line flexbox | 29.0 21.0 -webkit- |
11.0 | 28.0 | 6.1 -webkit- | 17.0 15.0 -webkit- 12.1 |
CSS3 Flexbox Conceptos
Flexbox consiste en contenedores flexibles y elementos de flexión.
Un contenedor de flexión se declara mediante el establecimiento de la display propiedad de un elemento a cualquiera de flex (traducido como un bloque) o inline-flex (traducido como en línea).
Dentro de un recipiente flex hay uno o más elementos de flexión.
Nota: Todo fuera de un contenedor de flexión y en su interior un elemento de flexión se representa como de costumbre. Flexbox define el número de elementos de la flexión se colocan dentro de un contenedor flexible.
Flex artículos están colocados dentro de un contenedor de la flexión a lo largo de una línea de flexión. Por defecto sólo hay una línea de flexión por contenedor flexible.
El siguiente ejemplo muestra tres elementos flexibles. Se colocan de forma predeterminada: a lo largo de la línea de la flexión horizontal, de izquierda a derecha:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width:
400px;
height: 250px;
background-color:
lightgrey;
}
.flex-item
{
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div
class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div
class="flex-item">flex item 3</div>
</div>
</body>
</html>También es posible cambiar la dirección de la línea de la flexión.
Si nos fijamos el direction de propiedad de rtl (de derecha a izquierda), el texto se dibuja de derecha a izquierda, y también la línea de flexión cambia de dirección, que va a cambiar el diseño de página:
Ejemplo
body {
direction: rtl;
}
.flex-container {
display: -webkit-flex;
display: flex;
width:
400px;
height: 250px;
background-color:
lightgrey;
}
.flex-item
{
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
} Dirección Flex
El flex-direction propiedad especifica la dirección de los elementos flexibles en el interior del recipiente flexible. El valor por defecto de flex-direction es row (de izquierda a derecha y de arriba a abajo).
Los otros valores son los siguientes:
-
row-reverse- Si la escritura en modo (dirección) es de izquierda a derecha, los elementos de flexión será expuesto derecha a izquierda -
column- Si el sistema de escritura es horizontal, los elementos de flexión será expuesto verticalmente -
column-reverse- Igual que la columna, pero a la inversa
El siguiente ejemplo muestra el resultado del uso de la row-reverse valor:
Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row-reverse;
flex-direction:
row-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} El ejemplo siguiente muestra el resultado de utilizar la column valor:
Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction:
column;
width:
400px;
height: 250px;
background-color:
lightgrey;
} El ejemplo siguiente muestra el resultado de utilizar la column-reverse valor:
Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
flex-direction:
column-reverse;
width:
400px;
height: 250px;
background-color:
lightgrey;
} La propiedad justificar contenido
La justify-content propiedad se alinea horizontalmente artículos del contenedor flexible cuando los artículos no utilizan todo el espacio disponible en el eje principal.
Los valores posibles son los siguientes:
-
flex-start- El valor por defecto. Los productos que están colocados al principio del envase -
flex-end- Los artículos se colocan en el extremo del recipiente -
center- Los artículos se colocan en el centro del recipiente -
space-between- Los productos que se colocan con el espacio entre las líneas -
space-around- Los productos que se colocan con el espacio antes, entre y después de las líneas
El siguiente ejemplo muestra el resultado del uso de la flex-end de valor:
Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} El ejemplo siguiente muestra el resultado de utilizar el center valor:
Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} El ejemplo siguiente muestra el resultado de utilizar el space-between valor:
Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content:
space-between;
width:
400px;
height: 250px;
background-color:
lightgrey;
} El siguiente ejemplo muestra el resultado de utilizar el space-around valor:
Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content:
space-around;
width:
400px;
height: 250px;
background-color:
lightgrey;
} Los ALIGN-Elementos de Propiedad
El align-items propiedad se alinea verticalmente los elementos del contenedor flexible cuando los artículos no utilizan todo el espacio disponible en el eje transversal.
Los valores posibles son los siguientes:
-
stretch- El valor por defecto. Los productos que se estiran para adaptarse al recipiente -
flex-start- Los artículos se colocan en la parte superior del recipiente -
flex-end- Los artículos se colocan en la parte inferior del recipiente -
center- Los artículos se colocan en el centro del recipiente (verticalmente) -
baseline- los artículos se colocan en la línea de base del recipiente
El siguiente ejemplo muestra el resultado de utilizar el stretch valor (este es el valor por defecto):
Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items:
stretch;
width:
400px;
height: 250px;
background-color:
lightgrey;
} El siguiente ejemplo muestra el resultado de utilizar el flex-start valor:
Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-start;
align-items:
flex-start;
width:
400px;
height: 250px;
background-color:
lightgrey;
} El siguiente ejemplo muestra el resultado del uso de la flex-end de valor:
Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items:
flex-end;
width:
400px;
height: 250px;
background-color:
lightgrey;
} El ejemplo siguiente muestra el resultado de utilizar el center valor:
Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items:
center;
width:
400px;
height: 250px;
background-color:
lightgrey;
} El ejemplo siguiente muestra el resultado de utilizar la baseline de valor:
Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items:
baseline;
width:
400px;
height: 250px;
background-color:
lightgrey;
} La propiedad flex-wrap
El flex-wrap propiedad especifica si los elementos de flexión debe envolver o no, si no hay suficiente espacio para ellos en una línea de flexión.
Los valores posibles son los siguientes:
-
nowrap- El valor por defecto. Los elementos flexibles no envolver -
wrap- Los elementos flexibles se envuelva en caso necesario -
wrap-reverse- Los elementos flexibles se envuelva, si es necesario, en orden inverso
El siguiente ejemplo muestra el resultado de utilizar el nowrap valor (este es el valor por defecto):
Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: nowrap;
flex-wrap: nowrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} El ejemplo siguiente muestra el resultado de utilizar la wrap valor:
Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width:
300px;
height: 250px;
background-color:
lightgrey;
} El siguiente ejemplo muestra el resultado del uso de la wrap-reverse valor:
Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap-reverse;
flex-wrap:
wrap-reverse;
width:
300px;
height: 250px;
background-color:
lightgrey;
} La propiedad align-contenido
El align-content propiedad modifica el comportamiento del flex-wrap propiedad. Es similar a align-items , pero en lugar de la alineación de los elementos de flexión, se alinea líneas flexibles.
Los valores posibles son los siguientes:
-
stretch- El valor por defecto. Las líneas se extienden a ocupar el espacio restante -
flex-start- Las líneas están llenas hacia el inicio del contenedor de la flexión -
flex-end- Las líneas están llenas hacia el extremo del contenedor de la flexión -
center- Líneas se embalan hacia el centro del recipiente flex -
space-between- Líneas se distribuyen de manera uniforme en el contenedor de la flexión -
space-around- Las líneas se distribuyen de manera uniforme en el contenedor de la flexión, con espacios de tamaño medio en los extremos
El ejemplo siguiente muestra el resultado de utilizar el center valor:
Ejemplo
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap:
wrap;
-webkit-align-content: center;
align-content:
center;
width:
300px;
height: 300px;
background-color:
lightgrey;
} Propiedades de elemento de flexión
Ordenando
El order propiedad especifica el orden de un elemento de flexibilidad en relación con el resto de los elementos flexibles dentro del mismo contenedor:
Ejemplo
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
.first {
-webkit-order: -1;
order: -1;
} Margen
Ajuste de margin: auto; absorberá espacio adicional. Puede ser utilizado para empujar artículos flexibles en diferentes posiciones.
En el siguiente ejemplo que damos margin-right: auto; en el primer elemento de la flexión. Esto hará que todo el espacio extra que se absorba a la derecha de ese elemento:
Ejemplo
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: 10px;
}
.flex-item:first-child {
margin-right: auto;
} centrado perfecto
En el siguiente ejemplo vamos a resolver un problema casi todos los días: el centrado perfecto.
Es muy fácil con Flexbox. Ajuste de margin: auto; hará el artículo perfectamente centrada en dos ejes:
Ejemplo
.flex-item {
background-color: cornflowerblue;
width: 75px;
height: 75px;
margin: auto;
} alinear-auto
El align-self propiedad de elementos flexibles anula ALIGN-objetos propiedad del contenedor de la flexión de dicho elemento. Tiene los mismos valores posibles como el align-items propiedad.
El ejemplo siguiente establece diferentes valores align-uno mismo a cada elemento de la flexión:
Ejemplo
.flex-item {
background-color: cornflowerblue;
width: 60px;
min-height: 100px;
margin: 10px;
}
.item1 {
-webkit-align-self: flex-start;
align-self:
flex-start;
}
.item2 {
-webkit-align-self: flex-end;
align-self: flex-end;
}
.item3 {
-webkit-align-self: center;
align-self: center;
}
.item4 {
-webkit-align-self:
baseline;
align-self: baseline;
}
.item5 {
-webkit-align-self: stretch;
align-self: stretch;
} flexionar
El flex propiedad especifica la longitud del elemento de flexión, en relación con el resto de los elementos de flexión en el interior del mismo contenedor.
En el siguiente ejemplo, el primer elemento de la flexión consumirá 2/4 del espacio libre, y los otros dos elementos flexibles consumirá 1/4 del espacio libre de cada uno:
Ejemplo
.flex-item {
background-color: cornflowerblue;
margin: 10px;
}
.item1 {
-webkit-flex: 2;
flex: 2;
}
.item2 {
-webkit-flex: 1;
flex: 1;
}
.item3 {
-webkit-flex: 1;
flex: 1;
} 
Más ejemplos
Crear un sitio web que responde con Flexbox
Este ejemplo muestra cómo crear un diseño de página web que responde con Flexbox.
CSS3 Propiedades FlexBox
En la tabla siguiente se enumeran las propiedades CSS utilizados con Flexbox:
| Property | Description |
|---|---|
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| flex-flow | A shorthand propert for flex-direction and flex-wrap |
| order | Specifies the order of a flexible item relative to the rest of the flex items inside the same container |
| align-self | Used on flex items. Overrides the container's align-items property |
| flex | Specifies the length of a flex item, relative to the rest of the flex items inside the same container |