CSS Flexbox - Documentación tecnica en Español

En CSS Flexbox La interfaz de usuario ("UI") de un sitio web tiene dos componentes. Primero, están los elementos visuales, como colores, fuentes e imágenes. En segundo lugar, está la colocación o el posicionamiento de esos elementos. En Responsive Web Design, un diseño de interfaz de usuario debe acomodar muchos navegadores y dispositivos diferentes que acceden al contenido. CSS3 introdujo cajas flexibles, o flexbox, para crear diseños de página para una interfaz de usuario dinámica. Es un modo de diseño que organiza los elementos de manera predecible para diferentes tamaños de pantalla y navegadores. Si bien son algo nuevos, todos los navegadores modernos populares admiten flexbox. Esta sección cubre cómo usar flexbox y las diferentes opciones de diseño que ofrece.

Colocar la propiedad de CSS display: flex; en un elemento le permite usar otras propiedades flexibles para crear una página receptiva.

la propiedad flex-direction para hacer una fila o columna

Agregar display: flex; a un elemento lo convierte en un contenedor flexible. Esto hace posible alinear cualquier elemento secundario de ese elemento en filas o columnas. Para ello, agregue la propiedad flex-direction al elemento principal y configúrelo en row (fila) o column (columna). Crear una fila alineará a los hijos horizontalmente, y crear una columna alineará a los hijos verticalmente.

Otras opciones para flex-direction son row-reverse (reverso de fila) y column-reverse (reverso de columna).

Nota: El valor predeterminado para la propiedad flex-direction es row.

Alinear elementos usando la propiedad justify-content

A veces, los elementos flexibles dentro de un contenedor flexible no llenan todo el espacio en el contenedor. Es común querer decirle a CSS cómo alinear y espaciar los elementos flexibles de cierta manera. Afortunadamente, la propiedad justify-content tiene varias opciones para hacer esto. Pero primero.

Establecer un contenedor flexible como una fila coloca los elementos flexibles uno al lado del otro de izquierda a derecha. Un contenedor flexible configurado como una columna coloca los elementos flexibles en una pila vertical de arriba a abajo. Para cada uno, la dirección en la que se disponen los elementos flexibles se denomina eje principal(main axis). Para una fila, esta es una línea horizontal que corta cada elemento. Y para una columna, el eje principal es una línea vertical a través de los elementos.

Hay varias opciones sobre cómo espaciar los elementos flexibles a lo largo de la línea que es el eje principal. Uno de los más utilizados es el justify-content: center; que alinea todos los elementos flexibles al centro dentro del contenedor flexible. Otras opciones incluyen:

• flex-start: alinea los elementos al inicio del contenedor flexible. Por una fila, esto empuja los artículos a la izquierda del contenedor. Para una columna, esto empuja los elementos a la parte superior del contenedor. Esta es la alineación predeterminada si no se especifica ninguna.
• flex-end: alinea los elementos al final del contenedor flexible. Por una fila, esto empuja los artículos a la derecha del contenedor. Para una columna, esto empuja los artículos al fondo del contenedor.
• space-between: alinea los elementos al centro del eje principal, con espacio adicional colocado entre los elementos. El primer y el último artículo se empujan hasta el borde del contenedor flexible. Por ejemplo, en una fila, el primer elemento está contra el lado izquierdo del contenedor, el último elemento está contra el lado derecho del contenedor, luego el espacio restante se distribuye uniformemente entre los otros elementos.
• space-around: similar a space-between pero el primer y el último elemento no están bloqueados en los bordes del contenedor, el espacio se distribuye alrededor de todos los elementos con un espacio medio en cada extremo del contenedor flexible.
• space-evenly: Distribuye el espacio de manera uniforme entre los elementos flexibles con un espacio completo en cada extremo del contenedor flexible

Alinear elementos con la propiedad align-items

La propiedad align-items es similar a justify-content. Recuerde que la propiedad justify-content alineó los elementos flexibles a lo largo del eje principal. Para las filas, el eje principal es una línea horizontal y para las columnas es una línea vertical.

Los contenedores flexibles también tienen un eje transversal (cross-axis) que es opuesto al eje principal. Para las filas, el eje transversal es vertical y para las columnas, el eje transversal es horizontal.

CSS ofrece la propiedad align-items para alinear elementos flexibles a lo largo del eje transversal. Para una fila, le dice a CSS cómo empujar los elementos en toda la fila hacia arriba o hacia abajo dentro del contenedor. Y para una columna, cómo empujar todos los elementos hacia la izquierda o hacia la derecha dentro del contenedor.

Los diferentes valores disponibles para align-items incluyen:

• flex-start: alinea los elementos al inicio del contenedor flexible. Para las filas, esto alinea los elementos a la parte superior del contenedor. Para las columnas, esto alinea los elementos a la izquierda del contenedor.
• flex-end: alinea los elementos al final del contenedor flexible. Para las filas, esto alinea los elementos al fondo del contenedor. Para las columnas, esto alinea los elementos a la derecha del contenedor.
• center: alinear elementos al centro. Para las filas, esto alinea verticalmente los elementos (igual espacio encima y debajo de los elementos). Para las columnas, esto los alinea horizontalmente (igual espacio a la izquierda y a la derecha de los elementos).
• stretch: estirar los artículos para llenar el contenedor flexible. Por ejemplo, los elementos de las filas se estiran para llenar el contenedor flexible de arriba a abajo. Este es el valor predeterminado de align-items si no se especifica ningún valor.
• baseline: alinear elementos a sus líneas de base. La línea base es un concepto de texto, piense en ella como la línea en la que se ubican las letras.

flex-wrap para envolver una fila o columna

CSS flexbox tiene una función para dividir un elemento flexible en varias filas (o columnas). Por defecto, un contenedor flexible encajará todos los elementos flexibles juntos. Por ejemplo, una fila estará en una sola línea. Sin embargo, al usar la propiedad flex-wrap , le dice a CSS que envuelva los elementos. Esto significa que los elementos adicionales se mueven a una nueva fila o columna. El punto de ruptura de donde ocurre la envoltura depende del tamaño de los artículos y del tamaño del contenedor.

CSS también tiene opciones para la dirección de la envoltura:

• nowrap : esta es la configuración predeterminada y no envuelve los elementos.
• wrap : envuelve los elementos de izquierda a derecha si están en una fila, o de arriba a abajo si están en una columna.
• wrap-reverse : envuelve los elementos de abajo a arriba si están en una fila, o de derecha a izquierda si están en una columna.

Use la propiedad flex-shrink para reducir elementos

Hasta ahora, todas las propiedades de los desafíos se aplican al contenedor de flexión (el elemento principal de los elementos de flexión). Sin embargo, hay varias propiedades útiles para los elementos flexibles.

La primera es la propiedad de flex-shrink . Cuando se usa, permite que un elemento se encoja si el contenedor flexible es demasiado pequeño. Los elementos se reducen cuando el ancho del contenedor principal es menor que el ancho combinado de todos los elementos flexibles dentro de él.

La propiedad flex-shrink toma números como valores. Cuanto mayor sea el número, más se reducirá en comparación con los otros elementos del contenedor. Por ejemplo, si un elemento tiene un valor de flex-shrink de 1 y el otro tiene un valor de flex-shrink de 3, el que tiene el valor de 3 se contraerá tres veces más que el otro.

Use la propiedad flex-grow para expandir elementos pasados

Lo opuesto a flex-shrink es la propiedad de flex-grow. Recuerde que flex-shrink controla el tamaño de los elementos cuando el contenedor se reduce. La propiedad flex-grow controla el tamaño de los elementos cuando el contenedor principal se expande.

Usando un ejemplo similar del último desafío, si un elemento tiene un valor de flex-grow de 1 y el otro tiene un valor de flex-grow de 3, el valor de 3 crecerá tres veces más que el otro.

Utilice la propiedad de flex-basis para establecer el tamaño inicial

La propiedad de flex-basis especifica el tamaño inicial del elemento antes de que CSS realice ajustes con flex-shrink o flex-grow.

Las unidades utilizadas por la propiedad de flex-basis son las mismas que otras propiedades de tamaño ( px , em , % , etc.). El valor auto dimensiona los elementos en función del contenido.

Hay un acceso directo disponible para establecer varias propiedades de flexión a la vez. Las propiedades flex-grow , flex-shrink y flex-basis pueden establecerse mediante el uso de la propiedad flex .

Por ejemplo, flex: 1 0 10px; establecerá el elemento para flex-grow: 1; , flex-shrink: 0; , y flex-basis: 10px; .

La configuración predeterminada de las propiedades es flex: 0 1 auto; .

La propiedad de order se utiliza para indicar a CSS el orden en que aparecen los elementos flexibles en el contenedor flexible. De forma predeterminada, los elementos aparecerán en el mismo orden en que vienen en el código fuente HTML. La propiedad toma números como valores y se pueden usar números negativos.

La propiedad final para los elementos flexibles es align-self . Esta propiedad le permite ajustar la alineación de cada elemento individualmente, en lugar de configurarlos todos a la vez. Esto es útil ya que otras técnicas de ajuste comunes que utilizan las propiedades CSS float , clear y vertical-align no funcionan en elementos flexibles.

align-self acepta los mismos valores que align-items y anulará cualquier valor establecido por la propiedad align-items .