Caja flexible

The CSS Podcast - 010: Flexbox

Un patrón de diseño que puede ser complicado en el diseño adaptable es una barra lateral que se alinea con algunos contenido. Cuando hay espacio de viewport, este patrón funciona muy bien, pero donde el espacio se condensa, ese diseño rígido puede convertirse en un problema.

El modelo de diseño de caja flexible (flexbox) es un modelo de diseño diseñado para contenido unidimensional. Se destaca por tomar muchos artículos de diferentes tamaños, y mostrar el mejor diseño para esos elementos.

Este es el modelo de diseño ideal para este patrón de la barra lateral. Flexbox no solo ayuda a intercalar la barra lateral y el contenido, pero cuando no hay suficiente espacio restante, la barra lateral se dividirá en una línea nueva. En lugar de establecer dimensiones rígidas para que el navegador las siga, con flexbox, puedes proporcionar límites flexibles para indicar cómo se podría mostrar el contenido.

¿Qué puedes hacer con un diseño flexible?

Los diseños Flex tienen las siguientes características: que podrás explorar en esta guía.

  • Pueden mostrarse como una fila o una columna.
  • Respetan el modo de escritura del documento.
  • De forma predeterminada, son de una sola línea, pero se puede solicitar que se unan en varias líneas.
  • Los elementos del diseño se pueden reordenar visualmente, de su orden en el DOM.
  • El espacio se puede distribuir dentro de los elementos, por lo que se hacen más grandes y más pequeños según el espacio disponible en sus padres.
  • El espacio se puede distribuir alrededor de los elementos y líneas flexibles en un diseño ajustado, con las propiedades de alineación de cuadros.
  • Los elementos se pueden alinear en el eje transversal.

El eje principal y el eje transversal

La clave para comprender Flexbox es entender el concepto de un eje principal y un eje transversal. El eje principal es el que establece tu propiedad flex-direction. Si es row, tu eje principal está a lo largo de la fila. Si es column, tu eje principal está a lo largo de la columna.

Tres cuadros uno al lado del otro con una flecha que apunta de izquierda a derecha. La flecha está etiquetada como Eje principal

Los elementos flexibles se mueven como un grupo en el eje principal. Recuerda: tenemos muchos elementos y estamos tratando de obtener el mejor diseño para ellos como grupo.

El eje transversal se ejecuta en la otra dirección al eje principal, por lo que, si flex-direction es row, el eje transversal se ejecuta a lo largo de la columna.

Tres cuadros de diferentes alturas, uno al lado del otro, con una flecha que apunta de izquierda a derecha. La flecha se denomina Eje principal. Hay otra flecha que apunta de arriba hacia abajo. Esta está etiquetada como eje cruzado.

En el eje cruzado, puedes realizar dos tareas. Puedes mover los elementos de forma individual o en grupo para que se alineen entre sí y con el contenedor. Además, si tienes líneas flexibles unidas, puedes tratar esas líneas como un grupo para controlar cómo se les asigna el espacio. En esta guía, verás cómo funciona todo esto en la práctica, Por ahora, ten en cuenta que el eje principal sigue tu flex-direction.

Crea un contenedor flexible

Veamos cómo se comporta flexbox tomando un grupo de elementos de diferentes tamaños y usándolos para colocarlos y descifrarlos.

<div class="container" id="container">
  <div>One</div>
  <div>Item two</div>
  <div>The item we will refer to as three</div>
</div>

Para usar Flexbox, debes declarar que quieres usar un contexto de formato flexible y no regular. el diseño intercalado y el bloque. Para ello, cambia el valor de la propiedad display a flex.

.container {
  display: flex;
}

Como aprendiste en la guía de diseño, esto te dará un cuadro de nivel de bloque, con elementos secundarios de Flex. Los elementos flex comienzan a mostrar inmediatamente un comportamiento de flexbox con sus valores iniciales.

Los valores iniciales significan lo siguiente:

  • Los elementos se muestran como una fila.
  • No se unen.
  • No crecen para llenar el contenedor.
  • Se alinean al comienzo del contenedor.

Cómo controlar la dirección de los elementos

Aunque aún no agregaste una propiedad de flex-direction, Los elementos se muestran como una fila porque el valor inicial de flex-direction es row. Si quieres una fila, no es necesario que agregues la propiedad. Para cambiar la dirección, agrega la propiedad y uno de los cuatro valores:

  • row: Los elementos se presentan como una fila.
  • row-reverse:: Los elementos se presentan como una fila desde el final del contenedor flexible.
  • column: Los elementos se organizan como una columna.
  • column-reverse : Los elementos se disponen como una columna desde el final del contenedor flexible.

Puedes probar todos los valores con nuestro grupo de elementos en la siguiente demostración.

Invertir el flujo de elementos y accesibilidad

Debes tener cuidado cuando uses propiedades que reordenen la visualización visual lejos de cómo se ordenan los elementos en el documento HTML, ya que puede afectar negativamente la accesibilidad. Los valores row-reverse y column-reverse son un buen ejemplo de esto. El reordenamiento solo se produce para el orden visual, no para el orden lógico. Es importante comprender esto, ya que el orden lógico es el orden en el que un lector de pantalla leerá el contenido y que seguirá cualquier persona que navegue con el teclado.

En el siguiente video, puedes ver cómo en un diseño de fila invertido, la tabulación entre vínculos se desconecta cuando la navegación con teclado sigue el DOM y no el elemento visual pantalla.

Cualquier elemento que pueda cambiar el orden de los elementos en flexbox o cuadrícula puede causar este problema. Por lo tanto, cualquier reordenamiento debe incluir pruebas exhaustivas para verificar que no se modifique el sitio. difícil de usar para algunas personas.

Para obtener más información, consulta lo siguiente:

Modos y dirección de escritura

Los elementos flexibles se organizan como una fila de forma predeterminada. Una fila se ejecuta en la dirección en la que fluyen las oraciones en el modo de escritura y la dirección de la escritura. Esto significa que, si estás trabajando en árabe, que tiene una dirección de secuencia de comandos de derecha a izquierda (rtl), los elementos se alinearán a la derecha. El orden de tabulación también empezaría a la derecha, ya que así es como se leen las oraciones en árabe.

Si trabajas con un modo de escritura vertical, como algunos tipos de letra japoneses, entonces una fila se ejecutará verticalmente, de arriba abajo. Intenta cambiar el flex-direction en esta demostración, que usa un modo de escritura vertical.

Por lo tanto, el comportamiento predeterminado de los elementos flexibles se vincula al modo de escritura del documento. La mayoría de los instructivos se escriben en inglés o en otro formato horizontal, modo de escritura de izquierda a derecha. Esto facilitaría suponer que los elementos flex se alinean a la izquierda y se ejecutan horizontalmente.

Con el eje principal y el eje transversal, además del modo de escritura que se debe tener en cuenta, es posible que sea más fácil comprender el hecho de que hablamos de inicio y final en lugar de arriba, abajo, izquierda y derecha en flexbox. Cada eje tiene un inicio y un final. El inicio del eje principal se denomina main-start. Entonces, nuestros elementos flexibles inicialmente se alinean desde el principio. El final de ese eje es main-end. El inicio del eje cruzado es cross-start y el final cross-end.

Un diagrama etiquetado de los términos anteriores

Cómo unir elementos flex

El valor inicial de la propiedad flex-wrap es nowrap. Esto significa que, si no hay suficiente espacio en el contenedor, los elementos se desbordarán.

Un contenedor flexible con nueve elementos dentro de él, los elementos se encogieron, por lo que hay una palabra en una línea pero no hay suficiente espacio para mostrarlos uno al lado del otro, así que los elementos flexibles se han extendido del contenedor.
Una vez que alcanzan el tamaño mínimo de contenido, los elementos flexibles comenzarán a desbordarse en el contenedor.

Los elementos que se muestran con los valores iniciales se reducirán lo más que puedan, hasta el tamaño de min-content, antes de que se produzca el desbordamiento.

Para que los elementos se unan, agrega flex-wrap: wrap al contenedor de Flex.

.container {
  display: flex;
  flex-wrap: wrap;
}

Cuando un contenedor flexible se une, crea varias líneas flexibles. En términos de distribución del espacio, cada línea actúa como un nuevo contenedor flexible. Por lo tanto, si estás uniendo filas, no es posible que algo en la fila 2 se alinee con algo que está por encima de ella en la fila 1. Esto es lo que significa que flexbox es unidimensional. Puedes controlar la alineación en un eje, una fila o una columna, pero no en ambos, como podemos hacer en la cuadrícula.

La abreviatura del flujo flexible

Puedes configurar las propiedades flex-direction y flex-wrap con el atajo flex-flow. Por ejemplo, para establecer flex-direction en column y permitir que los elementos unan, haz lo siguiente:

.container {
  display: flex;
  flex-flow: column wrap;
}

Cómo controlar el espacio dentro de los elementos flex

Si suponemos que nuestro contenedor tiene más espacio del que se necesita para mostrar los elementos, los elementos se alinean al inicio y no crecen para llenar el espacio. Dejan de crecer cuando alcanzan su tamaño máximo de contenido. Esto se debe a que el valor inicial de las propiedades flex- es el siguiente:

  • flex-grow: 0: Los elementos no crecen.
  • flex-shrink: 1: Los elementos pueden reducirse a un tamaño menor que su flex-basis.
  • flex-basis: auto: Los elementos tienen un tamaño base de auto.

Esto se puede representar con un valor de palabra clave de flex: initial. La propiedad abreviada flex, o los prefijos generales de flex-grow, flex-shrink y flex-basis se aplican a los elementos secundarios de la flexible.

Para hacer que los elementos crezcan, mientras permites que los elementos grandes tengan más espacio que los pequeños, usa flex:auto. Puedes probar esto con la demostración anterior. Esto establece las propiedades en los siguientes valores:

  • flex-grow: 1: Los elementos pueden crecer más que su flex-basis.
  • flex-shrink: 1: Los elementos pueden reducirse más que su flex-basis.
  • flex-basis: auto: Los elementos tienen un tamaño base de auto.

Si usas flex: auto, los elementos tendrán diferentes tamaños. ya que el espacio que se comparte entre los elementos se comparte después de que cada elemento se presenta como el tamaño máximo del contenido. Por lo tanto, un elemento grande ganará más espacio. Para forzar que todos los elementos tengan un tamaño coherente y que se ignore el tamaño del contenido, cambia flex:auto a flex: 1 en la demostración.

Esto se descomprime en la siguiente información:

  • flex-grow: 1: Los elementos pueden crecer más que su flex-basis.
  • flex-shrink: 1: Los elementos pueden reducirse a un tamaño menor que su flex-basis.
  • flex-basis: 0: Los elementos tienen un tamaño base de 0.

El uso de flex: 1 indica que todos los elementos tienen un tamaño igual a cero, por lo que todo el espacio en el contenedor flexible está disponible para distribuirse. Como todos los elementos tienen un factor flex-grow de 1, todos crecen de forma equitativa y el espacio se comparte de forma equitativa.

Permite que los elementos crezcan a diferentes velocidades.

No es necesario que todos los elementos tengan un factor flex-grow de 1. Puedes asignar diferentes factores flex-grow a tus elementos flexibles. En la demostración que aparece a continuación, el primer elemento tiene flex: 1, el segundo flex: 2 y el tercer flex: 3. A medida que estos elementos crecen desde 0, el espacio disponible en el contenedor flexible se comparte en seis. Se le asigna una parte al primer elemento, dos partes al segundo y tres partes al tercero.

Puedes hacer lo mismo desde un flex-basis de auto, aunque deberás especificar los tres valores. El primer valor es flex-grow, el segundo flex-shrink y el tercero flex-basis.

.item1 {
  flex: 1 1 auto;
}

.item2 {
  flex: 2 1 auto;
}

Este es un caso de uso menos común, ya que se debe usar un flex-basis de auto. es permitir que el navegador descubra la distribución del espacio. Sin embargo, si deseas que un elemento crezca un poco más de lo que decide el algoritmo, podría ser útil.

Reordenando elementos flexibles

Los elementos de tu contenedor flexible se pueden reordenar con la propiedad order. Esta propiedad permite ordenar los elementos en grupos ordinales. Los elementos se presentan en la dirección que dicta flex-direction. los valores más bajos primero. Si más de un elemento tiene el mismo valor, se mostrará con los demás elementos que tengan ese valor.

En el siguiente ejemplo, se demuestra este orden.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre flexbox

El valor predeterminado de flex-direction es

row
De manera predeterminada, flexbox acomoda los elementos en una fila y los alinea al comienzo. Con el ajuste activado, seguirá creando filas dentro de las que pueden fluir los elementos secundarios.
column
Establecer flex-direction en column es una excelente manera de apilar elementos, pero no es el valor predeterminado.

De forma predeterminada, un contenedor flexible une los elementos secundarios.

verdadero
Se debe habilitar la unión.
falso
Usa flex-wrap: wrap con display: flex para unir elementos secundarios

Un elemento secundario flexible parece comprimido. ¿Qué propiedad flexible ayuda a mitigar esto?

flex-grow
Esta propiedad describe si los elementos pueden crecer más allá de un tamaño de base, no cómo se deben comportar en una base.
flex-shrink
Sí, esta propiedad describe cómo controlar el tamaño si el ancho es inferior a la base.
flex-basis
Esto proporciona el punto de partida para el tamaño, pero no cómo manejar situaciones de tamaño en las que el ancho es inferior a la base, como en una situación de tamaño apretado.

Descripción general de la alineación de Flexbox

Flexbox trajo consigo un conjunto de propiedades para alinear elementos y distribuir el espacio entre ellos. Estas propiedades eran tan útiles que se trasladaron a su propia especificación también los encontrarás en Grid Layout. Aquí puede ver cómo funcionan cuando utiliza Flexbox.

El conjunto de propiedades se puede colocar en dos grupos. Propiedades para la distribución del espacio y propiedades para la alineación. Las propiedades que distribuyen el espacio son las siguientes:

  • justify-content: Es la distribución espacial en el eje principal.
  • align-content: Es la distribución espacial en el eje cruzado.
  • place-content: Es una abreviatura para configurar las dos propiedades anteriores.

Estas son las propiedades que se usan para la alineación en flexbox:

  • align-self: Alinea un solo elemento en el eje transversal.
  • align-items: Alinea todos los elementos como un grupo en el eje transversal.

Si estás trabajando en el eje principal, las propiedades comienzan con justify-. En el eje cruzado, comienza con align-.

Distribución del espacio en el eje principal

Con el código HTML que se usó antes, los elementos flex se organizan como una fila, y hay espacio en el eje principal. Los elementos no son lo suficientemente grandes como para llenar completamente el contenedor de flex. Los elementos se alinean al comienzo del contenedor flexible porque el valor inicial de justify-content es flex-start. Los elementos se alinean al comienzo y los espacios adicionales estarán al final.

Agrega la propiedad justify-content al contenedor de Flex. asígnale un valor de flex-end, Los elementos se alinean al final del contenedor y el espacio libre se coloca al comienzo.

.container {
  display: flex;
  justify-content: flex-end;
}

También puedes distribuir el espacio entre los elementos con justify-content: space-between.

Prueba algunos de los valores de la demostración y consulta MDN para ver el conjunto completo valores posibles.

Con flex-direction: column

Si cambiaste tu flex-direction a column, entonces justify-content funcionará en la columna. Para tener espacio libre en tu contenedor cuando trabajas como columna, debes darle al contenedor una height o block-size. De lo contrario, no tendrás espacio libre para distribuir.

Prueba los diferentes valores, esta vez con un diseño de columna de flexbox.

Distribución del espacio entre líneas flexibles

Con un contenedor flexible unido, es posible que tengas espacio para distribuir en el eje cruzado. En este caso, puedes usar la propiedad align-content con los mismos valores que justify-content. A diferencia de justify-content, que alinea elementos con flex-start de forma predeterminada, el valor inicial de align-content es stretch. Agrega la propiedad align-content al contenedor de flex para cambiar ese comportamiento predeterminado.

.container {
  align-content: center;
}

Pruébala en la demostración. El ejemplo tiene líneas unidas de elementos flexibles, y el contenedor tiene un block-size para que tengamos espacio libre.

La abreviatura place-content

Para configurar justify-content y align-content, puedes usar place-content con uno o dos valores. Se usará un solo valor para ambos ejes, si especificas que tanto la primera se usa para align-content como la segunda para justify-content.

.container {
  place-content: space-between;
  /* sets both to space-between */
}

.container {
  place-content: center flex-end;
  /* wrapped lines on the cross axis are centered,
  on the main axis items are aligned to the end of the flex container */
}

Alinear elementos en el eje cruzado

En el eje transversal, también puedes alinear tus elementos dentro de la línea flexible con align-items y align-self. El espacio disponible para la alineación dependerá de la altura del contenedor flexible o una línea flexible en el caso de un conjunto de artículos ajustados.

El valor inicial de align-self es stretch, por lo que los elementos flex de una fila se extienden a la altura del elemento más alto de forma predeterminada. Para cambiar esto, agrega la propiedad align-self a cualquiera de tus elementos flexibles.

.container {
  display: flex;
}

.item1 {
  align-self: flex-start;
}

Usa cualquiera de los siguientes valores para alinear el elemento:

  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

Consulta la lista completa de valores en MDN.

La siguiente demostración tiene una sola línea de elementos flexibles con flex-direction: row. El último elemento define la altura del contenedor flexible. El primer elemento tiene la propiedad align-self con un valor de flex-start. Intenta cambiar el valor de esa propiedad para ver cómo se mueve dentro de su espacio en el eje transversal.

La propiedad align-self se aplica a elementos individuales. La propiedad align-items se puede aplicar al contenedor flex para configurar todas las propiedades align-self individuales como un grupo.

.container {
  display: flex;
  align-items: flex-start;
}

En la próxima demostración, intenta cambiar el valor de align-items para alinear todos los elementos en la cruz. como un grupo.

¿Por qué no hay justify-self en flexbox?

Los elementos flexibles actúan como un grupo en el eje principal. Por lo tanto, no hay concepto de dividir un elemento individual de ese grupo.

En el diseño de cuadrícula, las propiedades justify-self y justify-items funcionan en el eje intercalado para alinear los elementos en ese eje dentro de su área de cuadrícula. Debido a la forma en que los diseños flexibles tratan los elementos como un grupo, Estas propiedades no se implementan en un contexto flexible.

Vale la pena saber que Flexbox funciona muy bien con los márgenes automáticos. Si te encuentras con la necesidad de dividir un elemento de un grupo, o separarlo en dos, puedes aplicarle un margen. En el siguiente ejemplo, el último elemento tiene un margen izquierdo de auto. El margen automático absorbe todo el espacio en la dirección en la que se aplica. Esto significa que empuja el elemento hacia la derecha, lo que divide los grupos.

Cómo centrar un elemento de forma vertical y horizontal

Las propiedades de alineación se pueden usar para centrar un elemento dentro de otro cuadro. La propiedad justify-content alinea el elemento en el eje principal. que es la fila. La propiedad align-items en el eje cruzado.

.container {
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre flexbox

.container {
  display: flex;
  direction: ltr;
}

Para alinear verticalmente con Flexbox, usa

alinear palabras clave
Genial
justificar las palabras clave
Lo sentimos
 
.container {
  display: flex;
  direction: ltr;
}

Para alinear horizontalmente con flexbox, usa

alinear palabras clave
Lo sentimos
justifica las palabras clave
Genial
 
.container {
  display: flex;
  direction: ltr;
}

De forma predeterminada, los elementos flexibles se alinean con stretch. Si deseas que el tamaño del contenido se use para los elementos secundarios, ¿cuál de los siguientes estilos usarías?

justify-content: flex-start
La propiedad justify es para la alineación horizontal, no vertical.
align-content: start
content alinea las líneas flexibles, no la alineación de los elementos secundarios.
height: auto
Esto no tendrá efecto.
align-items: flex-start
Sí, queremos alinearlos verticalmente con la parte superior o el inicio, lo que quita el valor de estiramiento predeterminado y, en su lugar, usa la altura del contenido.

Recursos