title: CSS Flexible Box Layout
text: # CSS Flexible Box Layout
  
  Diseño de Caja Flexible, comúnmente conocido como Flexbox, es un modelo de diseño CSS3. Está en la etapa de recomendación de candidatos (CR) del W3C. La disposición de flexbox permite que los elementos adaptables dentro de un contenedor se organicen automáticamente dependiendo del tamaño de la pantalla o del dispositivo.
  
  # CSS Flexible Box Layout
  ## Conceptos
  
  La mayoría de las páginas web están escritas en una combinación de HTML (Lenguaje de Marcado de Hipertexto) y CSS (Hojas de Estilos en Cascada). En resumen, HTML especifica el contenido y estructura lógica de la página, mientras que el CSS especifica cómo se ve: sus colores, fuentes, formato, diseño, y estilos.
  El diseño flex-box de CSS es una forma particular de especificar el diseño de las páginas HTML.
  Uno de los rasgos más definitorios de la disposición de flex es su capacidad para adaptarse al entorno, basada en su entorno de visualización. Las cajas flex pueden ajustarse en tamaño, ya sea disminuyendo, para evitar acaparar innecesariamente el espacio, o aumentando para dejar espacio para que el contenido se limite dentro de sus límites. Además, la disposición de las cajas flexibles es menos restrictiva en cuanto al flujo de contenidos que las de los tipos de visualización en bloque y en línea, que suelen ser unidireccionales. De hecho, no sólo puede especificarse el flujo flex direccional, a nivel de estilo, como hacia la derecha, hacia la izquierda, hacia arriba o hacia abajo; los elementos individuales dentro de un contenedor flex también pueden reordenarse y reorganizarse automáticamente para adaptarse al espacio de disposición disponible.
  
  # CSS Flexible Box Layout
  ## Historia
  
  En la década de 2000, el uso intensivo de la Web por parte de los agentes móviles motivó "diseños líquidos" y elementos adaptables para la creciente variedad de tamaños de pantallas. En la década de 2010, el uso intensivo de frameworks de diseño de Javascript, como Bootstrap, inspiró las especificaciones de diseño de flex-box y grid.
  Los módulos de CSS 3 incluían soluciones similares a esta, como flexbox y grid.
  
  # CSS Flexible Box Layout
  ## Terminología
  
  A continuación se presentan algunos términos asociados con el modelo de diseño flexible.
  
  # CSS Flexible Box Layout
  ## Terminología
  ### Flex Container
  
      El elemento padre que sostiene todos los elementos flex. Usando la propiedad display de CSS, el contenedor puede ser definido como flex o inline-flex.
  
  # CSS Flexible Box Layout
  ## Terminología
  ### Flex item
  
      Cualquier elemento hijo directo que se mantenga directo del contenedor flex se considera un elemento flex. Cualquier texto dentro del elemento contenedor es envuelto en un elemento flex desconocido.
  
  # CSS Flexible Box Layout
  ## Terminología
  ### Ejes
  
      Cada caja con propiedad flex contiene dos ejes: el principal y hachas de cruz. El main axis (eje principal) en el que los elementos se alinean entre sí. El cross axis (eje transversal) es perpendicular al eje principal.
  Flex-direction
      Establece el eje principal. Posibles argumentos: row (por defecto), row-reverse, column, column-reverse.
  Justify-content
      Determina cómo el contenido se coloca en el eje principal de la línea actual.
      Argumentos opcionales: left, right, center, space-between, space-around.
  Alinea-elementos
      Determina el valor por defecto de cómo se colocan los elementos flex en el eje transversal de cada línea.
  Align-content
      Determina el valor por defecto de cómo se alinean las líneas de los ejes transversales.
  Align-self
      Determina cómo se coloca solo un elemento a lo largo del eje transversal. Esto anula los valores predeterminados establecidos por los elementos de alineación.
  
  # CSS Flexible Box Layout
  ## Terminología
  ### Directions
  
      Los valores main-start/main-end determinan dónde empezar a colocar los items flex dentro del contenedor flex, empezando por el extremo del final principal. main-start/main-end determinan donde se llenan las líneas flex con los items flex desde el cross-start hasta el cross-end.
  Order
      Coloca los elementos en grupos y determina el orden en que deben ser colocados dentro del contenedor.
  Flex-flow
      Es una shorthand-property entre flex-direction y flex-wrap para colocar el contenido flex.
  
  # CSS Flexible Box Layout
  ## Terminología
  ### Líneas
  
      Los elementos flex pueden colocarse en una línea singular o en múltiples líneas, según se define en la propiedad flex-wrap, que controla tanto la dirección del eje transversal como la forma en la que las líneas se apilan dentro de un contenedor.
  
  # CSS Flexible Box Layout
  ## Terminología
  ### Dimensiones
  
      El Main size y el cross size son esencialmente la altura y el ancho del contenedor flex, cada uno de los cuales se ocupa del eje principal y del eje transversal respectivamente.
  
  # CSS Flexible Box Layout
  ## Designar un elemento flex
  
  Designar un elemento como elemento flex es relativamente fácil. Todo lo que se necesita es establecer la propiedad display en flex o inline-flex de la siguiente manera:
  O:
  Al ajustar la pantalla a uno de los dos valores anteriores, un elemento se convierte en contenedor flex y sus hijos en elementos flex. Si se ajusta la pantalla a flex, el contenedor se convierte en un elemento de nivel de bloque, mientras que si se ajusta a la pantalla a inline-flex, el contenedor de convierte en un elemento de nivel inline.
  
  # CSS Flexible Box Layout
  ## Alinear al centro
  
  Una de las ventajas de flexbox es la capacidad de alinear fácilmente elementos del contenedor con el centro de la página, tanto vertical como horizontalmente.