Contenedor flexible de CSS
Elemento padre (contenedor)
Como especificamos en el capítulo anterior, este es un contenedor flexible (el área azul) con tres elementos flexibles :
1
2
3
El contenedor flexible se vuelve flexible al establecer la displaypropiedad en
flex:
Ejemplo
.flex-container {
display: flex;
}
Las propiedades del contenedor flexible son:
La propiedad de dirección flexible
La flex-directionpropiedad define en qué dirección el contenedor quiere apilar los elementos flexibles.
1
2
3
Ejemplo
El columnvalor apila los elementos flexibles verticalmente (de arriba a abajo):
.flex-container {
display: flex;
flex-direction: column;
}
Ejemplo
El column-reversevalor apila los elementos flexibles verticalmente (pero de abajo hacia arriba):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Ejemplo
El rowvalor apila los elementos flexibles horizontalmente (de izquierda a derecha):
.flex-container {
display: flex;
flex-direction: row;
}
Ejemplo
El row-reversevalor apila los elementos flexibles horizontalmente (pero de derecha a izquierda):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
La propiedad de envoltura flexible
La flex-wrappropiedad especifica si los elementos flexibles deben ajustarse o no.
Los ejemplos a continuación tienen 12 elementos flexibles para demostrar mejor la
flex-wrappropiedad.
1
2
3
4
5
6
7
8
9
10
11
12
Ejemplo
El wrapvalor especifica que los elementos flexibles se ajustarán si es necesario:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Ejemplo
El nowrapvalor especifica que los elementos flexibles no se ajustarán (esto es predeterminado):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Ejemplo
El wrap-reversevalor especifica que los elementos flexibles se ajustarán si es necesario, en orden inverso:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
La propiedad de flujo flexible
La flex-flowpropiedad es una propiedad abreviada para configurar las propiedades
flex-directiony
flex-wrap.
Ejemplo
.flex-container {
display: flex;
flex-flow: row wrap;
}
La propiedad de justificar el contenido
La justify-contentpropiedad se utiliza para alinear los elementos flexibles:
1
2
3
Ejemplo
El centervalor alinea los elementos flexibles en el centro del contenedor:
.flex-container {
display: flex;
justify-content: center;
}
Ejemplo
El flex-startvalor alinea los elementos flexibles al comienzo del contenedor (esto es predeterminado):
.flex-container {
display: flex;
justify-content: flex-start;
}
Ejemplo
El flex-endvalor alinea los elementos flexibles al final del contenedor:
.flex-container {
display: flex;
justify-content: flex-end;
}
Ejemplo
El space-aroundvalor muestra los elementos flexibles con espacio antes, entre y después de las líneas:
.flex-container {
display: flex;
justify-content: space-around;
}
Ejemplo
El space-betweenvalor muestra los elementos flexibles con espacio entre líneas:
.flex-container {
display: flex;
justify-content: space-between;
}
La propiedad de elementos de alineación
La align-itemspropiedad se utiliza para alinear los elementos flexibles.
1
2
3
En estos ejemplos, usamos un contenedor de 200 píxeles de alto para demostrar mejor la
align-itemspropiedad.
Ejemplo
El centervalor alinea los elementos flexibles en el medio del contenedor:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Ejemplo
El flex-startvalor alinea los elementos flexibles en la parte superior del contenedor:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Ejemplo
El flex-endvalor alinea los elementos flexibles en la parte inferior del contenedor:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Ejemplo
El stretchvalor estira los elementos flexibles para llenar el contenedor (esto es predeterminado):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Ejemplo
El baselinevalor alinea los elementos flexibles como se alinean sus líneas base:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Nota: el ejemplo utiliza un tamaño de fuente diferente para demostrar que los elementos se alinean con la línea de base del texto:
1
2
3
La propiedad de alineación de contenido
La align-contentpropiedad se utiliza para alinear las líneas flexibles.
1
2
3
4
5
6
7
8
9
10
11
12
En estos ejemplos, usamos un contenedor de 600 píxeles de alto, con la
flex-wrappropiedad establecida en wrap, para demostrar mejor la align-contentpropiedad.
Ejemplo
El space-betweenvalor muestra las líneas flexibles con el mismo espacio entre ellas:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Ejemplo
El space-aroundvalor muestra las líneas flexibles con espacio antes, entre y después de ellas:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Ejemplo
El stretchvalor estira las líneas flexibles para ocupar el espacio restante (esto es predeterminado):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Ejemplo
Las centerpantallas de valor muestran las líneas flexibles en el medio del contenedor:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Ejemplo
El flex-startvalor muestra las líneas flexibles al comienzo del contenedor:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Ejemplo
El flex-endvalor muestra las líneas flexibles al final del contenedor:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Centrado perfecto
En el siguiente ejemplo resolveremos un problema de estilo muy común: el centrado perfecto.
SOLUCIÓN: Establezca las propiedades
justify-contenty en , y el elemento flexible quedará perfectamente centrado:align-itemscenter
Ejemplo
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
Las propiedades del contenedor CSS Flexbox
La siguiente tabla enumera todas las propiedades de CSS Flexbox Container:
| Property | Description |
|---|---|
| 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 |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |