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

Veremos las características principales para el elemento padre

  • display:flex
  • flex-flow:

                                1.flex-direction

                                2.flex-wrap

  • justify-content
  • align-content
  • align-items

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

justify-content:

Define cómo el navegador distribuye el espacio entre el eje y alrededor de los items flex, a lo largo del eje x principal de su contenedor

El alineamiento se produce luego de que las longitudes y márgenes automáticos son aplicados, lo que significa que, si existe al menos un elemento flexible con flex-grow diferente a 0, no tendrá efecto ya que no habrá espacio disponible.

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around

align-items:

Se usa para colocar las cajas flex igual que justify-content pero en la situación vertical.

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

align-content:

Su principal funcionalidad es igual a la de justify-content, con la diferencia que este no coloca las cajas si no que se encarga de colocar las lineas de dentro de las cajas

  • flex-start --> todas las filas pegadas arriba
  • flex-end --> todas las filas pegadas abajo
  • center --> todas las filas situadas en el centro del contenedor
  • space-between --> espacio entre ellas, la primera y la última pegadas a los límites del contenedor
  • space-round --> espacio entre ellas como la característica anterior, pero primero y última se separan de los límites
  • strech --> extira todos los elementos hasta que ocupan todo el espacio del contenedor

Importante!!! Esta característica sólo funciona cuando hay más de una linea.

Made with Slides.com