Elemento padre

Elementos hijos

Las características que podemos definir:

• order
• flex

                       flex-grow

                         flex-shrink

                      flex-bases

• min-width
• min-height
• align-self

order:

Indicaremos numericamente el orden de las objetos contenidos en el elemento padre.

Elegido el orden, aparecerán los elementos en ese orden.

Si tenemos varios elementos y a alguno de ellos se les dá un valor de order determinado, aquellos que no se les dá es como si tuvieran order : 0 .

Entonces se colocarán los elementos según su valor de order.

flex:

Indica la longitud de un determinado elemento dentro del elemento padre.

Formado por tres elementos, lo podremos definir introduciendo los valores de ellos o por separado.

• flex-grow
• flex-shrink
• flex-basis

Por defecto: flex: 0 1 auto;

Quiere decir que no van a crecer los elementos, se van a comprimir y el tamaño sea en relación a su contenido.

flex-grow:

Indica la longitud de un determinado elemento respecto a los elementos que estan junto a este dentro de un flex-box. Se podría decir que es cómo pueden crecer los elementos.

Su valor tiene que ser un valor numérico.

Tener en cuenta, que si este valor es distinto de 0, la propiedad justify-content no funciona.El valor por defecto es 0.

Para calcular la unidad de crecimiento:

Espacio disponible en px / suma de flex-grow

Si su valor 1, todos los elementos reparten espacio total.

flex-shrink:

Indica la contracción de un determinado elemento respecto a los elementos que estan junto a este dentro de un flex-box. Se podría decir que es cómo decrecen los elementos.

El valor por defecto es 1.

flex-basis:

Indica el tamaño base de un determinado elemento.

Indicaremos la medida en px.

flex-basis:

De manera predeterminada tiene el tañano de la característica width del elemento. Si por ejemplo tuvieramos un contendor en el que la característica flex-direction:column , flex-basis haría referencia al hight del elemento.

Si tenemos definido flex-direction:column; flex-basis:100px;width:50px;height:50px la característica de height no se aplica y se mantiene la de flex-basis. Si fuera flex-direction:row pasaría lo mismo pero seria con el widht.

flex-basis:

Si tuvieramos el valor de auto, el tamaño del item se ajusta al tamaño del contenido.

min-height:

Indica la altura minima del elemento.

min-width:

Indica la anchura minima del elemento.

align-self:

Indica la posición de cada elemento dentro del flex-box padre. Es una característica igual que la de justify-content, pero esta individualizada para cada elemento:

• auto
• flex-start
• flex-end
• center
• baseline
• strech

display:flex;

Característica obligatoria que deberá aparecer

display:inline-flex;

Tenemos otra característica para el display

El contenedor se adapta al contenido. Se pueden colocar varios elementos padre un al lado del otro.

flex-flow:

combina dos elementos flex-direction y flex-wrap

FORMAL SYNTAX:

flex-flow:<'flex-direction'>||<'flex-wrap'>

aunque se puede definir por separado cada elemento

definicion de los elementos

flex-direction:

indica la colocación de las cajas flex:

• row    --> valor por defecto, se colocan los elementos al lado izquierdo
• row-reverse --> se colocan a la parte derecha y se reinvierte el orden de las filas
• column --> se colocan los elementos en forma de columnas
• column-reverse --> se colocan los elementos en forma de columnas y se reinvierte el orden

definicion de los elementos

flex-wrap:

Especifica si los elementos "hijos" son obligados a permanecer en una misma línea o pueden fluir en varias líneas.

• nowrap       //valor inicial, los elementos  se             colocan en una sola linea
• wrap                  //se colocan en varias lineas
• wrap-reverse