Comenzamos trabajando en nuestro proyecto conociendo los atributos de display; flex cargándolos en nuestro documento html.
Flexbox representa un modelo básico de maquetación que supone la existencia de una caja padre llamada contenedor flexible o caja flex. Los elementos hijos situados dentro del contenedor flexible llevan el nombre de elementos o ítems flex.
Los elementos flex tienen la capacidad de redimensionarse y recolocarse dentro de la caja flex con facilidad. También tienen la capacidad de alinearse tanto horizontalmente como verticalmente y todo esto puede ser muy interesante a la hora de diseñar páginas web adaptativas.
La propiedad display esta por ahí desde CSS1, pero es en el CSS3 cuando adquiere la capacidad de transformar una caja cualquiera en un contenedor flex. Para esto tiene que tomar una de estas valores: flex o flex-inline.
.flex-container{display:flex;}
o
.flex-container{display:flex-inline;}
Propiedades del contenedor flex
| Propiedad | Sintaxis | Descripción |
|---|---|---|
| display | display: flex | inline-flex ; display: -ms-flexbox | -ms-inline-flexbox;.flex-container{ display: -webkit-flex; display: -ms-flexbox; display: flex; } |
Si su valor es flex o inline-flex, la propiedad display define un contenedor flex ( flexbox ). |
| flex-direction | flex-direction: row | row-reverse | column | column-reverse;.flex-container{ -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } | Establece la dirección del eje principal y por tanto la dirección de los elementos flex. El valor por defecto es row ( fila ). |
| flex-wrap | flex-wrap: nowrap | wrap | wrap-reverse;.flex-container{ -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } | Especifica si puede haber un cambio de línea ( wrap ) o no ( nowrap ).El valor por defecto es nowrap. |
| flex-flow | flex-flow: flex-direction [flex-wrap].flex-container{ -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } | Es la forma abreviada para las propiedades flex-direction y flex-wrap. El valor por defecto es row nowrap |
| align-items | align-items: flex-start | flex-end | center | baseline | stretch; -ms-flex-align:start | end | center | baseline | stretch;.flex-container{ -webkit-align-items: flex-start; -ms-flex-align:start; align-items: flex-start; } |
Define como se colocan los elementos dentro de una caja flexible flexbox relativamente al eje transversal. El valor por defecto es stretch. |
| justify-content | justify-content: flex-start | flex-end | center | space-between | space-around; -ms-flex-pack: start | end | center | justify | justify;.flex-container{ -webkit-justify-content:flex-start; -ms-flex-pack:start; justify-content:flex-start; } |
Define como se colocan los elementos dentro de una caja flexible ( flexbox ) relativamente al eje principal, cuando los elementos no ocupan toda la caja. El valor por defecto es flex-start. |
| align-content | align-content: flex-start | flex-end | center | space-between | space-around | stretch; -ms-flex-line-pack: start | end | center | justify | stretch;.flex-container{ -webkit-align-content: flex-start; -ms-flex-line-pack:start; align-content: flex-start; } |
Alinea los elementos del contenedor flex cuando los elementos no utilizan todo el espacio disponible en el eje transversal. El valor por defecto es stretch. |
Propiedades de los elementos ( ítems ) flex
| Propiedad | Sintaxis | Descripción |
|---|---|---|
| align-self | align-self: auto | flex-start | flex-end | center | baseline | stretch; -ms-flex-item-align:auto | start | end | center | baseline | stretch;.item { -webkit-align-self: flex-start; -ms-flex-item-align:start; align-self: flex-start; } |
Reposiciona elementos individuales relativamente al eje transversal. Generalmente se trata de elementos posicionados con align-items. |
| flex-grow | flex-grow: número | initial | inherit;.item{ -webkit-flex-grow: 2; -ms-flex-grow:2; flex-grow: 2; } | Define cuánto puede crecer un elemento flex, si fuera necesario. El valor por defecto es 0. |
| flex-shrink | flex-shrink: número | initial | inherit;.item{ -webkit-flex-shrink: 2; -ms-flex-shrink:2; flex-shrink: 2; } | Define cuánto puede disminuir ( contraerse ) un elemento flex, si fuera necesario. El valor por defecto es 1. |
| flex-basis | flex-basis: número | auto | initial | inherit;.item { -webkit-flex-basis: auto; -ms-flex-basis: auto; flex-basis: auto; } | Especifica el valor inicial del tamaño principal de un elemento flex. El valor por defecto es auto. |
| flex | flex: none | flex-grow [flex-shrink] [flex-basis];.item { -webkit-flex: 1; -ms-flex: 1; flex: 1; } | La forma abreviada para flex-grow, flex-shrink y flex-basis juntos.El valor por defecto es 0 1 auto. |
| order | order: número | initial | inherit;.item{ -webkit-order: 2; -ms-order:2; order: 2; } | Se utiliza para cambiar el orden en el que aparecen los elementos individuales. |
