Caja flexible

Podcast del CSS - 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 Flexible Box Layout Model (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 el navegador, con Flexbox puedes proporcionar límites flexibles para sugerir cómo podría mostrarse 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.
• Son una sola línea de forma predeterminada, pero se le puede pedir que la ajuste a 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 cruzado.

El eje principal y el eje cruzado

La clave para entender flexbox es comprender el concepto de eje principal y eje cruzado. El eje principal es el que establece tu propiedad flex-direction. Si ese valor es row, tu eje principal se encuentra a lo largo de la fila, Si es column, tu eje principal estará a lo largo de la columna.

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

El eje cruzado se desplaza en la dirección contraria al eje principal por lo tanto, si flex-direction es row, el eje cruzado se extiende a lo largo de la columna.

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. Para ello, tomemos un grupo de elementos de diferentes tamaños y usémoslos 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 flexibles comienzan a mostrar de inmediato un comportamiento de flexbox con sus valores iniciales.

Los valores iniciales significan lo siguiente:

• Los elementos se muestran como una fila.
• No se cubren.
• 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 deseas tener 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 presentan 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.

Cómo revertir el flujo de elementos y la accesibilidad

Debes tener cuidado cuando uses cualquier propiedad que reordene la visualización visual de la forma en que las cosas están ordenadas 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 ocurre por el orden visual, no por el orden lógico. Es importante entender esto, ya que el orden lógico es el orden en que un lector de pantalla lee en voz alta el contenido, y cualquier persona que navegue con el teclado lo seguirá.

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 el teclado sigue el DOM y no el elemento visual pantalla.

Cualquier cosa 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:

• Reordenamiento de contenido
• Flexbox y la navegación del teclado se desconectan

Modos de escritura y dirección

Los elementos flexibles se presentan como una fila de forma predeterminada. Una fila se desplaza en la dirección que las oraciones fluyen en tu modo de escritura y en la dirección de la secuencia de comandos. 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. En esta demostración, que usa un modo de escritura vertical, intenta cambiar flex-direction.

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 haría que fuera fácil suponer que los elementos flexibles se alinean a la izquierda y se ejecutan de forma horizontal.

Con el eje principal y el cruzado, además del modo de escritura a considerar, el hecho de que hablamos de inicio y fin en lugar de arriba, abajo, izquierda y derecha Flexbox podría ser más fácil de entender. Cada eje tiene un inicio y un fin. El inicio del eje principal se conoce como main-start. Entonces, nuestros elementos flexibles al principio están alineados desde el principio. El final de ese eje es main-end. El inicio del eje cruzado es cross-start y el final cross-end.

Unir elementos de 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.

.

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

Para hacer 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, se crean múltiples líneas flexibles. En términos de distribución del espacio, cada línea actúa como un nuevo contenedor de Flex. 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, en una fila o en una columna no ambos juntos como se puede hacer en la cuadrícula.

La abreviatura del flujo flexible

Puedes configurar las propiedades flex-direction y flex-wrap con la abreviatura 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;
}

Control del espacio en elementos flexibles

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 a 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 más 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, y permite 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:

• flex-grow: 1: Los elementos pueden tener un tamaño más grande que sus flex-basis.
• flex-shrink: 1: Los elementos pueden reducirse más que sus 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 uniforme e ignorar el cambio de tamaño del contenido De flex:auto a flex: 1 en la demostración.

Esto se descomprime en la siguiente información:

• flex-grow: 1: Los elementos pueden tener un tamaño más grande que sus flex-basis.
• flex-shrink: 1: Los elementos pueden reducirse más que sus 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.

Permitir que los elementos crezcan a diferentes ritmos

No es necesario que todos los elementos tengan un factor flex-grow de 1. Podrías 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 aumentan de 0, el espacio disponible en el contenedor flexible se comparte en seis. Una parte se da al primer elemento, dos partes a la segunda, tres partes a la tercera.

Puedes hacer lo mismo desde una flex-basis de auto, aunque deberás especificar las tres de salida. El primer valor es flex-grow, el segundo flex-shrink, y la tercera 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. Si quieres que un elemento crezca un poco más de lo que el algoritmo decide, cómo podría ser útiles.

Reordenando elementos flexibles

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

En el siguiente ejemplo, se demuestra este orden.

Verifica tus conocimientos

Pon a prueba tus conocimientos sobre Flexbox

Descripción general de la alineación de Flexbox

Flexbox trajo consigo un conjunto de propiedades para alinear elementos y distribuir espacio entre elementos. 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 de la distribución de espacios y de la alineación Estas son las propiedades que distribuyen el espacio:

• 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.

Las propiedades que se usan para la alineación en Flexbox:

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

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 HTML que se usó anteriormente, los elementos flexibles dispuestos como una fila, hay espacio en el eje principal. Los elementos no son lo suficientemente grandes como para llenar el contenedor flexible por completo. 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 columnas 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 cruzado, también puedes alinear tus elementos dentro de la línea flexible mediante 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 flexibles de una fila se estiran hasta 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 de Flex. 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 cruzado.

La propiedad align-self se aplica a elementos individuales. La propiedad align-items se puede aplicar al contenedor flexible para configurar todas las propiedades individuales de align-self 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 justificarse en flexbox?

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

En el diseño de cuadrícula, las propiedades justify-self y justify-items funcionan en el eje intercalado alinear los elementos en ese eje dentro del área de su 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 envía el elemento hacia la derecha y, así, 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 otra caja. 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;
}

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

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

Recursos

• Diseño de cuadro flexible de CSS de MDN incluye una serie de guías detalladas con ejemplos.
• Guía de trucos de CSS para Flexbox
• ¿Qué sucede cuando se crea un contenedor Flexbox Flex?
• Todo lo que necesitas saber sobre la alineación en Flexbox
• ¿Qué tan grande es ese cuadro flexible?
• Casos de uso para Flexbox
• Cómo inspeccionar y depurar diseños de Flexbox de CSS en las Herramientas para desarrolladores de Chrome