====== Flexbox ======

//Flexible Box Layout//. Modelo de cajas flexibles de [[informatica:diseno_web:css|CSS3]].

Sistema de organización unidimensional diseñado para construir interfaces de usuario donde los elementos pueden tener tamaños flexibles y organizarse de forma adaptable al espacio disponible.

  * [[https://caniuse.com/#search=flexbox|Soporte de Flexbox en navegadores]]

===== Propiedades =====

  * display: flex;

Para controlar el flujo de los elementos del contenedor flex:

  * ''flex-direction''. Valores:
    * ''row''
    * ''column''
    * ''row-reverse''
    * ''column-reverse''
  * ''flex-wrap''. Valores:
    * ''wrap''
    * ''nowrap'' (por defecto)
  * ''flex-flow'': atajo de ''flex-direction'' y ''flex-wrap''. Por ejemplo: ''flex-flow: row wrap''.
  * ''order''
  * ''flex-basis''
  * ''flex-grow''
  * ''flex-shrink''
  * ''flex'': atajo de ''flex-grow'', ''flex-shrink'' y ''flex-basis''. Por ejemplo: ''flex: 1 100px'' es lo mismo que:
    * ''flex-grow: 1''
    * ''flex-shrink: 1''
    * ''flex-basis: 100px''

==== justify-content ==== 

Para el posicionamiento y distribución de los elementos usamos la propiedad ''justify-content''.

Si queremos agrupar:

    * ''flex-start''
    * ''flex-end''
    * ''center''

Si queremos añadir espacio entre los elementos:

    * ''space-between''
    * ''space-around''
    * ''space-evenly''

==== align-items ====

Se comporta como ''justify-content'', pero para el eje transversal en lugar del longitudinal.

Valores:

  * ''stretch'' (por defecto)
  * ''flex-start''
  * ''baseline''
  * ''center'' 

==== align-content ====