Aplicación práctica de FlexBox. Método de posicionamiento de elementos Flexbox ¿Qué son las flexiones CSS?

07.12.2023 -

¡Hola habr!

Una buena tarde, sin presagiar nada interesante, nuestro chat recibió una propuesta del autor de una publicación que escribió en la primavera de 2012, para escribir un artículo remake, pero usando FlexBox y una explicación adjunta de qué y cómo funciona. Después de algunas dudas, el interés por comprender la especificación más profundamente aún ganó y felizmente me senté a escribir esos mismos ejemplos. A medida que nos sumergimos en esta área, muchos matices comenzaron a aclararse, que se convirtieron en algo más que un simple rediseño de los diseños. En general, en este artículo quiero hablar sobre una especificación tan maravillosa llamada "Módulo de diseño de caja flexible CSS" y mostrar algunas de sus características interesantes y ejemplos de aplicación. Invito amablemente a todos los que estén interesados a unirse al truco.

Lo que me gustaría llamar su atención es que para crear un diseño en FlexBox, el desarrollador necesitará cierto grado de adaptación. Por mi propio ejemplo, sentí que muchos años de experiencia me estaban jugando una broma cruel. FlexBox requiere una forma ligeramente diferente de pensar acerca de alinear elementos en un flujo.

parte técnica

Antes de pasar a cualquier ejemplo, vale la pena comprender qué propiedades se incluyen en esta especificación y cómo funcionan. Ya que algunos de ellos no son muy claros inicialmente, y otros están rodeados de mitos que nada tienen que ver con la realidad.

Entonces. Hay dos tipos principales de elementos en FlexBox: Flex Container y sus hijos: Flex Items. Para inicializar el contenedor, simplemente asigne, vía css, al elemento pantalla: flexible; o pantalla: flexible en línea;. La diferencia entre flex e inline-flex está solo en el principio de interacción con los elementos que rodean el contenedor, similar a display: block; y mostrar: inline-block;, respectivamente.

Dentro de un contenedor flexible se crean dos ejes, el eje principal y el eje perpendicular o transversal. La mayoría de los elementos flexibles se alinean a lo largo del eje principal y luego a lo largo del eje transversal. De forma predeterminada, el eje principal es horizontal y está dirigido de izquierda a derecha, y el eje transversal es vertical y está dirigido de arriba a abajo.

La dirección de los ejes se puede controlar mediante una propiedad CSS. dirección flexible. Esta propiedad toma varios valores:
fila(predeterminado): el eje principal del contenedor flexible tiene la misma orientación que el eje en línea del modo de dirección de fila actual. El inicio (inicio-principal) y el final (fin-principal) de la dirección del eje principal corresponden al inicio (inicio-en línea) y el final (fin-en línea) del eje en línea.
fila inversa: Todo es igual que en la fila, solo se intercambian el inicio principal y el final principal.
columna: igual que la fila, solo que ahora el eje principal se dirige de arriba a abajo.
columna-inversa: igual que la fila inversa, solo que el eje principal se dirige de abajo hacia arriba.
Puedes ver cómo funciona esto en el ejemplo de jsfiddle.

De forma predeterminada, todos los elementos flexibles de un contenedor se colocan en una línea; incluso si no caben en el contenedor, se extienden más allá de sus límites. Este comportamiento se alterna usando la propiedad envoltura flexible. Esta propiedad tiene tres estados:
ahorarap(predeterminado): los elementos flexibles se alinean en una sola línea de izquierda a derecha.
envoltura: los elementos flexibles se construyen en modo multilínea, la transferencia se realiza en la dirección del eje transversal, de arriba a abajo.
envoltura inversa: igual que envolver, pero se envuelve de abajo hacia arriba.
Veamos un ejemplo.

Para mayor comodidad, hay una propiedad adicional. flujo flexible, en el que puedes especificar simultáneamente dirección flexible Y envoltura flexible. Se parece a esto: flujo flexible:

Los elementos de un contenedor se pueden alinear usando la propiedad justificar-contenido a lo largo del eje principal. Esta propiedad acepta hasta cinco valores diferentes.
inicio flexible(predeterminado): los elementos flexibles están alineados con el origen del eje principal.
extremo flexible: los elementos están alineados al final del eje principal
centro: Los elementos están alineados con el centro del eje principal.
espacio entre: los elementos ocupan todo el ancho disponible en el contenedor, los elementos más externos se presionan firmemente contra los bordes del contenedor y el espacio libre se distribuye uniformemente entre los elementos.
espacio alrededor: Los elementos flexibles están alineados para que el espacio libre se distribuya uniformemente entre los elementos. Pero vale la pena señalar que el espacio entre el borde del contenedor y los elementos exteriores será la mitad del espacio entre los elementos en el medio de la fila.
Por supuesto, puedes hacer clic en un ejemplo de cómo funciona esta propiedad.

Eso no es todo, también tenemos la posibilidad de alinear elementos a lo largo del eje transversal. Aplicando la propiedad alinear elementos, que también toma cinco valores diferentes, puedes lograr un comportamiento interesante. Esta propiedad le permite alinear elementos en una fila entre sí.
inicio flexible: todos los elementos se empujan al principio de la línea
extremo flexible: los elementos se empujan hasta el final de la línea
centro: los elementos están alineados al centro de la fila
base: Los elementos están alineados con la línea base del texto.
estirar(predeterminado): los elementos se estiran para llenar toda la línea.

Otra propiedad similar a la anterior es alinear contenido. Es el único responsable de alinear líneas enteras con respecto al contenedor flexible. No tendrá ningún efecto si los elementos flexibles ocupan una línea. La propiedad adquiere seis valores diferentes.
inicio flexible: todas las líneas se presionan hasta el comienzo del eje transversal
extremo flexible: todas las líneas se presionan hasta el final del eje transversal
centro: Todas las líneas de embalaje están alineadas con el centro del eje transversal.
espacio entre: las líneas se distribuyen desde el borde superior hasta el inferior, dejando espacio libre entre las líneas, mientras que las líneas más externas se presionan contra los bordes del contenedor.
espacio alrededor: Las líneas se distribuyen uniformemente por todo el contenedor.
estirar(predeterminado): las líneas se estiran para ocupar todo el espacio disponible.
Puedes probar cómo funcionan align-items y align-content en este ejemplo. Presenté específicamente estas dos propiedades en un ejemplo, ya que interactúan bastante estrechamente y cada una realiza su propia tarea. Observe lo que sucede cuando los elementos se colocan en una línea o en varias líneas.

Hemos resuelto los parámetros de un contenedor flexible, solo queda descubrir las propiedades de los elementos flexibles.
La primera propiedad que conoceremos es orden. Esta propiedad le permite cambiar la posición de un elemento específico en la secuencia. De forma predeterminada, todos los elementos flexibles tienen orden: 0; y están construidos en orden de flujo natural. En el ejemplo puedes ver cómo se intercambian los elementos si se les aplican diferentes valores de orden.

Una de las principales propiedades es base flexible. Con esta propiedad podemos especificar el ancho base de un elemento flexible. El valor predeterminado es auto. Esta propiedad está estrechamente relacionada con crecimiento flexible Y flex-contraíble, del que hablaré un poco más adelante. Acepta un valor de ancho en px, %, em y otras unidades. Básicamente, este no es estrictamente el ancho del elemento flexible, es una especie de punto de partida. En relación con el cual el elemento se estira o se contrae. En el modo automático, el elemento obtiene un ancho base relativo al contenido que contiene.

crecimiento flexible en varios recursos tiene una descripción completamente incorrecta. Dice que supuestamente establece la proporción de los tamaños de los elementos en el contenedor. Actualmente, esto no es verdad. Esta propiedad especifica el factor de ampliación del elemento cuando hay espacio libre en el contenedor. Por defecto, esta propiedad tiene un valor de 0. Imaginemos que tenemos un contenedor flexible que tiene un ancho de 500px, dentro de él hay dos elementos flexibles, cada uno con un ancho base de 100px. Esto deja otros 300 px de espacio libre en el contenedor. Si especificamos flex-grow: 2; para el primer elemento y flex-grow: 1; Como resultado, estos bloques ocuparán todo el ancho disponible del contenedor, solo el ancho del primer bloque será de 300 px y el del segundo solo de 200 px. ¿Qué pasó? Lo que pasó es que los 300px de espacio libre disponibles en el contenedor se distribuyeron entre los elementos en una proporción de 2:1, +200px para el primero y +100px para el segundo. En realidad, así es como funciona.

Aquí pasamos sin problemas a otra propiedad similar, a saber flex-contraíble. El valor predeterminado es 1. También establece un factor para cambiar el ancho de los elementos, solo que en la dirección opuesta. Si el contenedor tiene un ancho menos que la suma del ancho básico de los elementos, entonces esta propiedad entra en vigor. Por ejemplo, el contenedor tiene un ancho de 600 px y la base flexible de los elementos es 300 px. Proporcione el primer elemento flex-shrink: 2; y el segundo elemento flex-shrink: 1;. Ahora reduzcamos el contenedor en 300 px. Por tanto, la suma del ancho de los elementos es 300px mayor que el contenedor. Esta diferencia se distribuye en una proporción de 2:1, por lo que restamos 200 px del primer bloque y 100 px del segundo. El nuevo tamaño de los elementos es 100px y 200px, para el primer y segundo elemento, respectivamente. Si configuramos flex-shrink en 0, evitamos que el elemento se reduzca a un tamaño menor que su ancho base.

De hecho, esta es una descripción muy simplificada de cómo funciona todo, para que el principio general quede claro. Con más detalle, si alguien está interesado, el algoritmo se describe en la especificación.

Las tres propiedades se pueden escribir en forma abreviada usando la expresión doblar. Esto se parece a esto:
doblar: ;
Y también podemos escribir dos versiones más abreviadas, flexionar:automático; Y flexionar: ninguno;, lo que significa flexionar: 1 1 automático; Y flexionar: 0 0 automático; respectivamente.

La última propiedad de los elementos flexibles sigue siendo alinearse. Aquí todo es simple, es lo mismo que alinear elementos para un contenedor, lo que le permite anular la alineación de un elemento específico.

¡Eso es todo, estoy cansado de esto! ¡Danos ejemplos!

Resolvimos la parte técnica, resultó bastante larga, pero hay que profundizar en ella. Ahora podemos pasar a la aplicación práctica.
Durante el desarrollo de esas “cinco plantillas de diseño responsivas realmente útiles”, tuvimos que resolver situaciones típicas que los desarrolladores encuentran con bastante frecuencia. Con flexbox, implementar estas soluciones se vuelve más fácil y flexible.
Tomemos el mismo cuarto diseño, porque... Tiene los elementos más interesantes.

Primero, designemos el ancho principal de la página, alineémoslo con el centro y presionemos el pie de página hacia la parte inferior de la página. Como siempre en general.

Html (fondo: #ccc; altura mínima: 100%; familia de fuentes: sans-serif; pantalla: -webkit-flex; pantalla: flex; dirección flexible: columna;) cuerpo (margen: 0; relleno: 0 15px ; mostrar: -webkit-flex; mostrar: flex-direction: columna; flex: auto; 30px 0 10px; mostrar: -webkit-flex; ajustar el espacio entre; : 960px; ancho mínimo: 430px; margen: automático; tamaño del cuadro: cuadro de borde: 430px;

Debido al hecho de que especificamos flex-grow: 1 para .main; se extiende hasta toda la altura disponible, presionando así el pie de página hacia abajo. La ventaja de esta solución es que el pie de página puede tener una altura no fija.

Ahora coloquemos el logo y el menú en el encabezado.
.logo (tamaño de fuente: 0; margen: -10px 10px 10px 0; pantalla: flex; flex: ninguno; align-items: center; ) .logo:antes, .logo:después (contenido: ""; pantalla: bloque ) .logo:antes (fondo: #222; ancho: 50px; alto: 50px; margen: 0 10px 0 20px; radio del borde: 50%; ) .logo:después (fondo: #222; ancho: 90px; alto : 30px; ) .nav ( margen: -5px 0 0 -5px; pantalla: -webkit-flex; pantalla: flex; flex-wrap: wrap; ) .nav-itm ( fondo: #222; ancho: 130px; alto: 50px; tamaño de fuente: 1,5rem; decoración de texto: ninguna; pantalla: -webkit-flex; justificar-contenido: centro;

Dado que el encabezado tiene flex-wrap: wrap; y justificar-contenido: espacio-entre; El logotipo y el menú están dispersos en diferentes lados del encabezado y, si no hay suficiente espacio para el menú, se moverá elegantemente debajo del logotipo.

Luego vemos una publicación grande o un banner, es difícil decir qué es específicamente, pero ese no es el punto. Tenemos una imagen a la derecha y texto con título a la izquierda. Personalmente, sigo la idea de que cualquier elemento debe ser lo más flexible posible, independientemente de si el diseño es adaptativo o estático. Entonces, en esta publicación tenemos una barra lateral en la que se coloca una imagen, estrictamente hablando, no podemos decir exactamente qué ancho necesitamos, porque hoy tenemos una imagen grande, mañana una pequeña, y no queremos rehacer el elemento. desde cero cada vez. Esto significa que necesitamos que la barra lateral ocupe el lugar que necesita y el resto del espacio se destina al contenido. Hagámoslo:

Cuadro (tamaño de fuente: 1.25rem; altura de línea: 1.5; estilo de fuente: cursiva; margen: 0 0 40px -50px; pantalla: -webkit-flex; pantalla: flex; flex-wrap: wrap; justify-content: centro .box-base (margen izquierdo: 50px; flex: 1 0 430px; ) .box-side (margen izquierdo: 50px; flex: ninguno; ) .box-img (ancho máximo: 100%; alto: auto)

Como puede ver para .box-base, donde tenemos el título y el texto, especifiqué el ancho de la base con base flexible: 430px;, y también prohibió la contracción del bloque usando contracción flexible: 0;. Con esta manipulación dijimos que el contenido no puede tener menos de 430px de ancho. Y en vista de que para .box indico envoltura flexible: envoltura; En el momento en que la barra lateral y el contenido no caben en el contenedor.box, la barra lateral automáticamente caerá debajo del contenido. Y todo esto sin aplicación. @medios de comunicación! Creo que esto es realmente genial.

Nos quedamos con contenido de tres columnas. Hay varias soluciones a este problema, te mostraré una de ellas; hay otra opción en los otros diseños.
Creemos un contenedor, llamémoslo .content y configúrelo.
.content (margen inferior: 30px; pantalla: -webkit-flex; pantalla: flex; flex-wrap: wrap;)

El contenedor tiene tres columnas, .banners, .posts, .comments
.banners (flex: 1 1 200px;) .posts (margen: 0 0 30px 30px; flex: 1 1 200px;) .comments (margen: 0 0 30px 30px; flex: 1 1 200px;)

Le di a las columnas un ancho de base de 200 px para que no se estrecharan demasiado, pero sería mejor si se movieran una debajo de la otra según fuera necesario.

Según el diseño, no podremos prescindir de @media con el contenido, así que ajustemos un poco más el comportamiento de las columnas en cuanto a ancho.<800px и <600px.
@media pantalla y (ancho máximo: 800px) ( .banners ( margen izquierdo: -30px; pantalla: -webkit-flex; pantalla: flex; base flexible: 100%; ) .posts ( margen izquierdo: 0; ) ) @media screen y (ancho máximo: 600px) ( .content ( display: block; ) .banners ( margin: 0; display: block; ) .comments ( margin: 0; ) )

Esa es toda la magia cuando se trata de crear un diseño en FlexBox. Otra tarea que me gustó es la del quinto diseño, concretamente se trata de la adaptación de contenidos.

Vemos como en resolución de escritorio las publicaciones se construyen en una cuadrícula de tres seguidas. Cuando el ancho de la ventana gráfica es inferior a 800 px, la cuadrícula se convierte en una columna con publicaciones, donde la foto de la publicación se alinea en los lados izquierdo y derecho del contenido de la publicación, alternativamente. Y si el ancho es inferior a 600 px, la foto de la publicación se oculta por completo.
.grid (display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-between; ) .grid-itm ( margin-bottom: 30px; flex-basis: calc(33.33% - 30px * 2/3); pantalla: -webkit-flex; pantalla: flex-wrap: wrap ) .grid-img ( margen: 0 auto 20px; flex: 0 1 80%; ) .grid-cont( flex: 0 1 100%; grid-img (flex: 0 0 auto;) .grid-itm:nth-child(even) .grid-img (margen: 0 0 0 30px; orden: 2; ) .grid-itm:nth-child (impar) .grid-img ( margen: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title ( text-align: left; ) ) @media screen y (max-width: 600px) ( .grid-img (pantalla: ninguna; ) )

De hecho, esto es sólo una pequeña parte de lo que se puede implementar con FlexBox. La especificación le permite crear diseños de página muy complejos utilizando código simple.

Con razón, se puede llamar a Flexbox un intento exitoso de resolver una amplia gama de problemas al crear diseños en CSS. Pero antes de pasar a su descripción, averigüemos qué hay de malo en los métodos de diseño que utilizamos ahora.

Cualquier diseñador de diseño conoce varias formas de alinear algo verticalmente o hacer un diseño de 3 columnas con una columna central de goma. Pero admitamos que todos estos métodos son bastante extraños, parecen un truco, no son adecuados en todos los casos, son difíciles de entender y no funcionan si no se cumplen ciertas condiciones mágicas que se han desarrollado históricamente.

Esto sucedió porque html y css se desarrollaron evolutivamente. Al principio, las páginas web parecían documentos de texto de un solo subproceso, un poco más tarde, dividir la página en bloques se hacía mediante tablas, luego se puso de moda el diseño con flotantes y, después de la muerte oficial de ie6, las técnicas de bloques en línea fueron También agregó. Como resultado, heredamos una mezcla explosiva de todas estas técnicas, que se utilizan para crear diseños para el 99,9% de todas las páginas web existentes.

Organización multilínea de bloques dentro de un contenedor flexible.

envoltura flexible

Todos los ejemplos que dimos anteriormente se construyeron teniendo en cuenta la disposición de bloques de una sola línea (una sola columna). Hay que decir que, de forma predeterminada, un contenedor flexible siempre organizará los bloques dentro de sí mismo en una línea. Sin embargo, la especificación también admite el modo multilínea. La propiedad CSS flex-wrap es responsable del contenido de varias líneas dentro de un contenedor flexible.

Valores disponibles envoltura flexible:

ahorarap (valor por defecto): los bloques están organizados en una línea de izquierda a derecha (en rtl de derecha a izquierda)
envoltura: los bloques se disponen en varias filas horizontales (si no caben en una fila). Se suceden de izquierda a derecha (en rtl de derecha a izquierda)
envoltura inversa: igual que envoltura, pero los bloques están dispuestos en orden inverso.

flex-flow es una abreviatura conveniente para flex-direction + flex-wrap

En esencia, flex-flow proporciona la capacidad de describir la dirección del eje transversal principal y de múltiples líneas en una propiedad. Flujo flexible predeterminado: fila nowrap.

flujo flexible:<‘flex-direction’> || <‘flex-wrap’>

CSS

/* es decir. ... */ .my-flex-block( flex-dirección:columna; flex-wrap: wrap; ) /* esto es lo mismo que... */ .my-flex-block( flex-flow: ajuste de columna )

alinear contenido

También hay una propiedad align-content, que determina cómo se alinearán verticalmente las filas de bloques resultantes y cómo dividirán todo el espacio del contenedor flexible.

Importante: align-content solo funciona en modo multilínea (es decir, en el caso de flex-wrap:wrap; o flex-wrap:wrap-reverse;)

Valores disponibles alinear contenido:

inicio flexible: se presionan filas de bloques hasta el comienzo del contenedor flexible.
extremo flexible: las filas de bloques se presionan hasta el final del contenedor flexible
centro: las filas de bloques están en el centro del contenedor flexible
espacio entre: la primera fila de bloques está ubicada al comienzo del contenedor flexible, la última fila de bloques está al final, todas las demás filas están distribuidas uniformemente en el espacio restante.
espacio alrededor: las filas de bloques se distribuyen uniformemente desde el principio hasta el final del contenedor flexible, dividiendo todo el espacio disponible en partes iguales.
estirar (valor por defecto): Las filas de bloques se extienden para ocupar todo el espacio disponible.

Las propiedades CSS flex-wrap y align-content deben aplicarse directamente al contenedor flexible, no a sus hijos.

Demostración de propiedades multilínea en flex

Reglas CSS para elementos secundarios de un contenedor flexible (bloques flexibles)

base flexible: el tamaño básico de un solo bloque flexible

Establece el tamaño inicial del eje principal para un bloque flexible antes de que se le apliquen transformaciones basadas en otros factores de flexión. Se puede especificar en cualquier unidad de longitud (px, em, %, ...) o automáticamente (predeterminado). Si se configura como automático, se toman como base las dimensiones del bloque (ancho, alto), que, a su vez, pueden depender del tamaño del contenido, si no se especifica explícitamente.

flex-grow – “codicia” de un solo bloque flexible

Determina cuánto más grande puede ser un bloque flexible individual que los elementos adyacentes, si es necesario. flex-grow acepta un valor adimensional (predeterminado 0)

Ejemplo 1:

Si todas las cajas flexibles dentro de un contenedor flexible tienen flex-grow:1, entonces tendrán el mismo tamaño
Si uno de ellos tiene flex-grow:2 entonces será 2 veces más grande que todos los demás.

Ejemplo 2:

Si todas las cajas flexibles dentro de un contenedor flexible tienen flex-grow:3, entonces tendrán el mismo tamaño
Si uno de ellos tiene flex-grow:12 entonces será 4 veces más grande que todos los demás

Es decir, el valor absoluto de flex-grow no determina el ancho exacto. Determina su grado de “codicia” en relación con otros bloques flexibles del mismo nivel.

flex-shrink: el factor de “compresibilidad” de un solo bloque flexible

Determina cuánto se contraerá el bloque flexible en relación con los elementos adyacentes dentro del contenedor flexible si no hay suficiente espacio libre. El valor predeterminado es 1.

flex: abreviatura de las propiedades flex-grow, flex-shrink y flex-basis

flexible: ninguno | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

CSS

/* es decir. ... */ .my-flex-block( flex-grow:12; flex-shrink:3; base flexible: 30em; ) /* esto es lo mismo que... */ .my-flex-block( flex : 12 3 30em )

Demostración de flex-grow, flex-shrink y flex-basis

align-self: alineación de un único bloque flexible a lo largo del eje transversal.

Hace posible anular la propiedad align-items del contenedor flexible para un bloque flexible individual.

Valores de alineación automática disponibles (las mismas 5 opciones que los elementos de alineación)

flex-start: el bloque flexible se presiona hasta el comienzo del eje transversal
extremo flexible: el bloque flexible se presiona contra el extremo del eje transversal
centro: el bloque flexible está ubicado en el centro del eje transversal
línea de base: el bloque flexible está alineado con la línea de base
estirar (valor por defecto): El bloque flexible se estira para ocupar todo el espacio disponible a lo largo del eje transversal, teniendo en cuenta el ancho mínimo/máximo si está configurado.

orden: el orden de un único bloque flexible dentro de un contenedor flexible.

De forma predeterminada, todos los bloques se sucederán en el orden especificado en el HTML. Sin embargo, este orden se puede cambiar utilizando la propiedad de pedido. Se especifica como un número entero y el valor predeterminado es 0.

El valor del pedido no especifica la posición absoluta del elemento en la secuencia. Determina el peso de la posición del elemento.

HTML

Artículo 1

elemento2

elemento3

elemento4

elemento5

En este caso, los bloques se sucederán uno tras otro a lo largo del eje principal en el siguiente orden: elemento5, elemento1, elemento3, elemento4, elemento2

Demostración de alineación automática y pedido

margen: automático verticalmente. ¡Los sueños se hacen realidad!

¡Puedes amar Flexbox al menos porque la familiar alineación horizontal a través de margin:auto también funciona aquí para verticales!

My-flex-container ( display: flex; height: 300px; /* O lo que sea */ ) .my-flex-block ( ancho: 100px; /* O lo que sea */ height: 100px; /* O lo que sea * / margin: auto; /* ¡Magia! El bloque está centrado vertical y horizontalmente */ )

Cosas para recordar

No debes usar flexbox donde no sea necesario.
Definir regiones y cambiar el orden del contenido en muchos casos sigue siendo útil para que dependa de la estructura de la página. Piénsalo.
Comprenda flexbox y conozca los conceptos básicos. Esto hace que sea mucho más fácil lograr el resultado esperado.
No te olvides de los márgenes. Se tienen en cuenta al configurar la alineación de los ejes. También es importante recordar que los márgenes en flexbox no "colapsan" como lo hacen en un flujo normal.
El valor flotante de los bloques flexibles no se tiene en cuenta y no tiene significado. Probablemente esto pueda usarse de alguna manera para una degradación elegante al cambiar a Flexbox.
Flexbox es muy adecuado para el diseño de componentes web y partes individuales de páginas web, pero no ha mostrado su mejor lado al diseñar diseños básicos (posición del artículo, encabezado, pie de página, barra de navegación, etc.). Este sigue siendo un punto controvertido, pero este artículo muestra las deficiencias de manera bastante convincente xanthir.com/blog/b4580

Finalmente

Creo que flexbox, por supuesto, no reemplazará a todos los demás métodos de diseño, pero, por supuesto, en un futuro próximo ocupará un nicho digno en la resolución de una gran cantidad de tareas. Y, por supuesto, debes intentar trabajar con él ahora. Uno de los siguientes artículos estará dedicado a ejemplos específicos de cómo trabajar con diseño flexible. Suscríbete a las noticias;)

Contenido:

Caja flexible es una nueva forma de organizar bloques en la página. Esta es una tecnología creada específicamente para la disposición de elementos, a diferencia de los flotadores. Mediante el uso Caja flexible Puede alinear elementos fácilmente horizontal y verticalmente, cambiar la dirección y el orden de visualización de los elementos, estirar los bloques hasta la altura total del padre o clavarlos en el borde inferior.

ACTUALIZADO del 02/02/2017: Hice una práctica hoja de referencia en Flexbox, con demostraciones en vivo y descripciones de la especificación: Hoja de referencia de Flexbox.

Los ejemplos utilizan sólo la nueva sintaxis. En el momento de escribir este artículo, se muestran más correctamente en Cromo. Funcionan parcialmente en Firefox, pero no en Safari.

Según caniuse.com, Caja flexible no es compatible con IE 8 y 9 y Opera Mini, y en otros navegadores no todas las propiedades son compatibles y/o se requieren prefijos.

Esto significa que la tecnología no se puede utilizar ampliamente en este momento, pero ahora es el momento de conocerla mejor.

Primero necesitas saber que los elementos flexibles están dispuestos a lo largo de ejes. De forma predeterminada, los elementos están dispuestos horizontalmente, a lo largo eje principal- eje principal.

También hay que tener en cuenta que al utilizar Caja flexible float , clear y vertical-align no funcionan para bloques internos, ni tampoco para propiedades que definen columnas en el texto.

Preparemos un campo de pruebas para experimentos:

Un bloque principal (amarillo) y 5 bloques secundarios.

Pantalla:flexible

Y ahora agregamos display: flex; al elemento padre. . Los divs internos están alineados (a lo largo del eje principal) con columnas de la misma altura, independientemente del contenido.

pantalla: flexible; Hace que todos los elementos secundarios sean flexibles, en lugar de estar en línea o basados en bloques, como era el caso originalmente.

Si el bloque principal contiene imágenes o texto sin envoltorios, se convierten en elementos flexibles anónimos.

Mostrar propiedad para Caja flexible puede tomar dos significados:

flex: se comporta como un elemento de bloque. Al calcular el ancho de los bloques, el diseño tiene prioridad (si los bloques no son lo suficientemente anchos, el contenido puede desbordar los límites).

inline-flex: se comporta como un bloque en línea. El contenido tiene prioridad (el contenido distribuye los bloques al ancho requerido para que las líneas encajen, si es posible).

Dirección flexible

La dirección del diseño del bloque está controlada por la propiedad flex-direction.

Valores posibles:

fila - fila (valor predeterminado); fila inversa: una fila con elementos en orden inverso; columna - columna; column-reverse: una columna con elementos en orden inverso.

fila y fila-reversa

columna y columna inversa

envoltura flexible

Puede haber muchos bloques en una línea. Si se ajustan o no está determinado por la propiedad flex-wrap.

Valores posibles:

nowrap: los bloques no se transfieren (valor predeterminado); envoltura: los bloques se transfieren; wrap-reverse: los bloques se envuelven y organizan en orden inverso.

Para abreviar las propiedades flex-direction y flex-wrap, existe una propiedad: flex-flow.

Valores posibles: puede establecer ambas propiedades o solo una. Por ejemplo:

flujo flexible: columna; flujo flexible: envoltura inversa; flujo flexible: envoltura de columna inversa;

Demostración de ajuste inverso de fila:

Orden

Para controlar el orden de los bloques, utilice la propiedad de orden.

Valores posibles: números. Para poner el bloque primero, dale orden: -1:

Justificar contenido

Hay varias propiedades para alinear elementos: justify-content, align-items y align-self.

justify-content y align-items se aplican al contenedor principal, align-self se aplica a los secundarios.

justify-content es responsable de la alineación del eje principal.

Posibles valores para justificar contenido:

flex-start: los elementos se alinean desde el principio del eje principal (valor predeterminado); extremo flexible: los elementos están alineados desde el final del eje principal; centro: los elementos están alineados con el centro del eje principal; espacio intermedio: los elementos están alineados a lo largo del eje principal, distribuyendo el espacio libre entre ellos; espacio alrededor: los elementos se alinean a lo largo del eje principal, distribuyendo el espacio libre a su alrededor.

inicio flexible y final flexible

espacio entre, espacio alrededor

Alinear elementos

align-items es responsable de alinear a lo largo del eje perpendicular.

Posibles valores de elementos de alineación:

flex-start: los elementos se alinean desde el principio del eje perpendicular; extremo flexible: los elementos están alineados desde el final del eje perpendicular; centro: los elementos están alineados en el centro; línea de base: los elementos están alineados a lo largo de la línea de base; estiramiento: los elementos se estiran, ocupando todo el espacio a lo largo del eje perpendicular (valor predeterminado).

inicio flexible, final flexible

línea de base, estiramiento

Alinearse

align-self también es responsable de la alineación del eje perpendicular, pero está configurado para elementos flexibles individuales.

Posibles valores para align-self:

auto es el valor predeterminado. Indica que el elemento utiliza los elementos de alineación del elemento principal; flex-start: el elemento está alineado desde el comienzo del eje perpendicular; extremo flexible: el elemento está alineado desde el final del eje perpendicular; centro: el elemento está alineado en el centro; línea de base: el elemento está alineado a lo largo de la línea de base; estirar: el elemento se estira, ocupando todo el espacio de altura.

Alinear contenido

Para controlar la alineación dentro de un contenedor flexible de varias líneas, existe la propiedad align-content.

Valores posibles:

flex-start: los elementos se alinean desde el principio del eje principal; extremo flexible: los elementos están alineados desde el final del eje principal; centro: los elementos están alineados con el centro del eje principal; espacio intermedio: los elementos están alineados a lo largo del eje principal, distribuyendo el espacio libre entre ellos; espacio alrededor: los elementos están alineados a lo largo del eje principal, distribuyendo el espacio libre a su alrededor; estirar: los elementos se estiran para llenar toda la altura (valor predeterminado).

inicio flexible, final flexible

centrar, estirar

espacio entre, espacio alrededor

PD: Nunca pude ver algunas cosas en acción, por ejemplo, la línea flex-flow: column wrap o la entrada completa de la misma flex-direction: column; envoltura flexible: envoltura; .

Los elementos están en una columna, pero no se transfieren:

wrap no funciona con flex-direction: column; , aunque en la especificación se ve así:

Creo que funcionará con el tiempo.

ACTUALIZADO del 21/06/2014: Todo funciona si configuras la altura del bloque. Gracias por el consejo

En este artículo, presentaremos la tecnología CSS Flexbox, diseñada para crear diseños de páginas web flexibles.

Compatibilidad del navegador con la tecnología CSS Flexbox

La tecnología Flexbox ya es compatible con casi todos los navegadores utilizados actualmente (usando prefijos: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+) .

Conceptos básicos de Flexbox (cuadrícula)

Flexbox se basa en una cuadrícula. Consta de sólo 2 elementos. El primer elemento es contenedor flexible. La creación de un contenedor flexible se realiza agregando una propiedad de visualización CSS con el valor flex o flex-inline al elemento HTML requerido.

Después todos los hijos inmediatos de un contenedor flexible(los niños) se convierten automáticamente elementos flexibles(Segundo elemento de cuadrícula flexbox).

Marcado HTML:

Contenedor flexible ( display: flex; /* flex || inline-flex */ ) Estructura de cuadrícula Flexbox

Los elementos flexibles ocupan de forma predeterminada toda la altura del contenedor flexible.

El valor de flex o flex-inline determina cómo contenedor flexible se presentará en la página. Si es necesario representarlo como bloquear, luego use el valor flexible. Si un elemento necesita ser representado como minúscula, luego use el valor flex-inline. En este caso, ocupará todo el espacio de página necesario para mostrar sus elementos.

Dirección de alineación del elemento flexible

La especificación de la dirección de alineación de los elementos flexibles dentro de un contenedor flexible se realiza mediante ejes.

En flexbox asignan 2 ejes. El primer eje se llama básico o principal(dirigido a la derecha por defecto). Segundo - transverso(hacia abajo por defecto).

Los elementos de un contenedor flexible se organizan en una línea (de forma predeterminada) incluso cuando no hay suficiente espacio para ellos. Los elementos flexibles están dispuestos en un contenedor flexible a lo largo del eje principal.

Disposición predeterminada de los elementos en el contenedor (los elementos flexibles que no tienen suficiente espacio en el contenedor flexible quedan fuera de él)

En CSS Flexbox, permitir que los elementos flexibles se muevan a nuevas líneas (si no tienen suficiente espacio en la línea actual) se logra configurando la propiedad flex-wrap del contenedor CSS flex en wrap o wrap-reverse.

Envoltura flexible: envoltura; /* nowrap (en una línea - predeterminado) wrap (permite ajustar elementos flexibles en nuevas líneas) wrap-reverse (ajustar elementos flexibles en orden inverso) */

Los valores de ajuste y ajuste inverso de la propiedad CSS flex-wrap determinan la dirección del eje transversal.

La configuración de la dirección del eje principal de un flexbox se realiza utilizando la propiedad CSS flex-direction.

Dirección flexible: fila; /* fila (derecha) - fila predeterminada-inversa (izquierda) columna (abajo) columna-inversa (arriba) */

Con esta propiedad, puede asegurarse de que los elementos flexibles no estén dispuestos horizontalmente (en filas), sino verticalmente (en columnas).

Las propiedades flex-direction y flex-wrap se pueden especificar utilizando la propiedad genérica CSS flex-flow:

Flujo flexible: fila ahora envuelta; /* 1 valor - dirección flexible, 2 valores - envoltura flexible */

Alinear elementos flexibles

En Flexbox, la alineación de elementos dentro de un contenedor se realiza en dos direcciones (ejes).

Alinear elementos flexibles a lo largo del eje principal

La alineación de elementos a lo largo del eje principal se realiza mediante la propiedad CSS justify-content:

justificar contenido: inicio flexible; /* flex-start (los elementos flexibles están alineados con respecto al comienzo del eje) – por defecto flex-end (los elementos flexibles están alineados con respecto al final del eje) centro (en el centro del contenedor flexible) espacio entre (uniformemente, es decir, con la misma distancia entre elementos flexibles) space-around (uniformemente, pero agregando la mitad del espacio antes del primer elemento flexible y después del último) */ Opciones para alinear elementos flexibles a lo largo del eje principal

Alinear elementos flexibles a lo largo del eje transversal

La alineación de elementos flexibles en un contenedor flexible a lo largo del eje transversal se realiza utilizando la propiedad CSS align-items:

Alinear elementos: estirar; /* estirar (estirar a lo largo de toda la longitud del eje transversal) - por defecto flex-start (relativo al comienzo del eje transversal) flex-end (relativo al final del eje transversal) baseline (relativo a la línea base ) centro */ Opciones para alinear elementos flexibles a lo largo del eje transversal

Alinear líneas de contenedores flexibles

CSS Flexbox le permite alinear no solo los elementos flexibles en sí, sino también las líneas en las que se encuentran.

Alinear contenido: estiramiento /* estiramiento (estirado a lo largo de toda la longitud del eje transversal) – por defecto inicio flexible (relativo al comienzo del eje transversal) extremo flexible (relativo al final del eje transversal) centro ( en el centro) espacio entre (uniformemente, es decir, con la misma distancia entre las líneas) espacio alrededor (uniformemente, pero agregando la mitad del espacio antes de la primera línea y después de la última) */ Opciones para alinear líneas de un contenedor flexible

La propiedad align-content solo tiene sentido usarla cuando los elementos flexibles en un contenedor flexible están ubicados en varias líneas. Para que esto suceda, es necesario, en primer lugar, que el ancho de todos los elementos flexibles sea mayor que el ancho del contenedor flexible y, en segundo lugar, el contenedor flexible debe tener la propiedad CSS flex-wrap configurada en wrap o wrap-reverse.

propiedad CSS de alineación propia

La propiedad align-self, a diferencia de las anteriores (justify-content, align-items y align-content), está pensada para elementos flexibles. Te permite cambiar alineación del elemento flexible a lo largo de la dirección del eje transversal. La propiedad align-self puede tomar los mismos valores que align-items.

Alinear elementos: estirar; /* auto (predeterminado) || estirar || inicio flexible || extremo flexible || línea de base || centro */

Contenedor flexible (pantalla: flex; ancho: 300 px; alto: 150 px; align-items: centro; relleno: 10 px; color de fondo: #efefef;) .flex-container_element-1, .flex-container_element-2, .flex -container_element-3, .flex-container_element-4 (flex-basis: 70px; text-align: center; padding: 15px; font-size: 30px; ) .flex-container_element-1 (align-self: flex-start; fondo: #fe4; ) .flex-container_element-2 ( align-self: flex-end; fondo: rosa; ) .flex-container_element-3 ( align-self: estiramiento; fondo: lima; ) .flex-container_element-4 ( align-self: auto; background: cyan; ) Cómo funciona la propiedad CSS align-self

Cambiar el orden de los elementos flexibles

De forma predeterminada, los elementos flexibles se muestran en el contenedor flexible en el orden en que aparecen en el código HTML. Para cambiar el orden de algunos elementos flexibles en relación con otros en CSS Flexbox, puede usar la propiedad de orden. Esta propiedad CSS organiza los elementos flexibles en un contenedor flexible en orden ascendente de sus números.

Orden: 0; /* 0 (predeterminado) entero positivo o negativo */

Por ejemplo:

...

CSS: .flex-container ( display: flex; ) /* mueve el segundo elemento flexible al final */ .flex-container_element-2 ( orden: 2; ) /* mueve el tercer elemento a 2 */ .flex-container_element-3 ( orden: 1; ) /* posición 4 elementos flexibles antes de 1 */ .flex-container_element-4 ( orden: -1; ) Cómo funciona la propiedad de orden CSS

Controlar el ancho de un elemento flexible

Flexbox tiene varias propiedades CSS que determinan qué tan ancho puede ser un elemento flexible.

Propiedad CSS base flexible

Esta propiedad está destinada a establecer el ancho inicial de un elemento flexible. Puede establecer el valor del ancho usando varias unidades de medida, como px, %, em, etc. De forma predeterminada, esta propiedad está configurada en automático (en este caso, el ancho del elemento se calculará automáticamente en función de su contenido) .

El ancho final del elemento flexible estará determinado por dependiendo de los valores de las propiedades CSS flex-grow y flex-shrink que se establecen no solo para este elemento, sino también para otros elementos flexibles de este contenedor flexible.

propiedad CSS de crecimiento flexible

Esta propiedad determina si el ancho inicial del elemento flexible aumenta (crece). El aumento del ancho de un elemento flexible se realiza mediante espacio de línea libre. El valor de la propiedad CSS flex-grow es entero. Es este valor el que determina (si es mayor o igual a 1) qué parte del espacio libre ocupará el elemento flexible.

Por ejemplo:

...

CSS: .flex-container (pantalla: flex; ancho: 600px;) .flex-container_element-1 (flex-basis: 40%; flex-grow: 1;) .flex-container_element-2 (flex-basis: 40% ; flex-grow: 4; ) Cómo funciona la propiedad CSS flex-grow

En este ejemplo, si los elementos flexibles están ubicados en la misma línea y hay espacio libre (600×(1-0.8)=120px):

1/5 de este espacio se agregará al ancho de element.flex-container_element-1 (120×1/5=24px);
4/5 de este espacio se agregarán al ancho del elemento.flex-container_element-2 (120×4/5=96px).

En otras palabras, la propiedad CSS flex-grow le permite no solo especificar que el ancho de un elemento flexible puede crecer, sino también especificar cuánto puede crecer este valor en relación con otros elementos.

De forma predeterminada, la propiedad CSS flex-grow está establecida en 0. Esto significa que el elemento flexible no puede crecer (aumentar su ancho).

propiedad CSS de contracción flexible

Esta propiedad determina si se puede reducir el ancho de un elemento flexible. Reducir el ancho de un elemento flexible solo ocurrirá si el ancho de línea no será suficiente para mostrar todos los elementos flexibles ubicado en el mismo. El ancho requerido se calcula en basado en el ancho inicial, que tiene todos los elementos flexibles.

Por ejemplo:

...

CSS: .flex-container (pantalla: flex; ancho: 500px;) .flex-container_element-1 (flex-basis: 300px; flex-shrink: 1;) .flex-container_element-2 (flex-basis: 300px; flex -shrink: 3 ) Cómo funciona la propiedad CSS flex-shrink

El ancho del contenedor flexible es de 500 px. Los elementos flexibles requieren 600 px para mostrarse. Como resultado, faltan 100px. En este ejemplo, se pueden reducir 2 elementos flexibles (.flex-container_element-1 y .flex-container_element-2). El ancho del primer elemento flexible.flex-container_element-1 en este caso será 300 – 1/4*100= 275px. El ancho del segundo elemento flexible.flex-container_element-2 en este caso será 300 – 3/4*100= 225px.

Valor por defecto:

Flex-contracción: 1;

Si necesitas evitar que el ancho de un elemento flexible disminuya, luego debe especificar el número 0 como valor de la propiedad flex-shrink.

Propiedad flexible CSS

Para configurar fácilmente flex-grow, flex-shrink y flex-basis, puede utilizar la propiedad flex CSS.

Valor por defecto:

Flex: 0 1 automático; /* 0 - flex-grow (primer valor) 1 - flex-shrink (segundo valor) auto - flex-basis (tercer valor) */

Diseño de página usando CSS Flexbox

En esta sección, crearemos un diseño responsivo simple usando Flexbox.

La estructura del diseño constará de 3 secciones:

encabezado (para mostrar el encabezado y el menú principal);
principal (para mostrar la parte principal);
pie de página (para pie de página).

La parte principal, a su vez, se dividirá en 2 secciones más (las posicionaremos usando CSS Flexbox). En pantallas grandes (>=992px), estas secciones se alinearán horizontalmente y en otras pantallas, verticalmente (<992px).

[Encabezado de página...]

[Parte principal...]

CSS: /* contenedor (establece el ancho del bloque dependiendo del ancho de la ventana gráfica) */ .container ( posición: relativa; margen izquierdo: automático; margen derecho: automático; padding-right: 15px; padding-left: 15px; ) @ media (ancho mínimo: 576 px) ( .container ( ancho: 540 px; ancho máximo: 100 %; ) ) @media (ancho mínimo: 768 px) ( .container ( ancho: 720 px; ancho máximo: 100 %; ) ) @media (ancho mínimo: 992 px) ( .container ( ancho: 960 px; ancho máximo: 100%; ) ) @media (ancho mínimo: 1200 px) ( .container ( ancho: 1140 px; ancho máximo: 100 % ; ) ) /* contenedor flexible */ .row-flex ( pantalla: -webkit-box; pantalla: -webkit-flex; pantalla: -ms-flexbox; pantalla: flex; -webkit-flex-wrap: envoltura; - ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px ) /* Configuración de elementos flexibles CSS */ .col-flex ( posición: relativa; ancho: 100 %; altura mínima: 1 px; relleno-derecha: 15 px; relleno-izquierda: 15 px; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flexionar: 0 0 100%; ancho máximo: 100%; ) /* ancho del artículo y bloques laterales para pantallas grandes */ @media (ancho mínimo: 992px) ( /* 2/3 del ancho del contenedor */ .main_article ( -webkit-box-flex: 0; -webkit-flex : 0 0 66,666667%; -ms-flex: 0 0 66,666667%; flex: 0 0 66,666667%; ancho máximo: 66,666667% ) /* 1/3 del ancho del contenedor */ .main_aside ( -webkit-box-flex: 0; -webkit-flex: 0 0 33,333333%; -ms-flex: 0 0 33,333333%;

Para admitir el diseño en la mayoría de los navegadores, agregaremos los prefijos necesarios y el ancho máximo al CSS.

Para "convertir" un bloque en un contenedor flexible, usaremos la clase row-flex. Estableceremos el ancho de cada elemento flexible (main_article y main_aside) dentro del contenedor flexible usando la propiedad CSS flexible.

Como ejemplo, usemos Flexbox para marcar el bloque "Pie de página" y la sección de la sección del artículo principal "Cosas interesantes en el sitio".

Dividiremos la sección "Pie de página" en 4 partes iguales (el ancho mínimo de una parte es 200 px) y la sección "Cosas interesantes en el sitio" en 3 partes (el ancho mínimo de una parte es 300 px).

[Encabezado de página...]

[Parte principal...]

[1 más...]

[2 más...]

[3 más...]

CSS adicional:

Footer_block, .main_other_article ( -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; - ms-flex-positivo: 1; crecimiento flexible: 1; ancho máximo: 100%)

Módulo Diseño de caja flexible(caja flexible - actualmente una recomendación candidata del W3C) tiene como objetivo proporcionar una forma más eficiente de diseño, alineación y distribución del espacio libre entre elementos en un contenedor, incluso cuando su tamaño es desconocido y/o dinámico (de ahí la palabra "flexible") .

La idea principal del diseño flexible es darle al contenedor la capacidad de cambiar el ancho/alto (y el orden) de sus elementos para llenar mejor el espacio (en la mayoría de los casos, para admitir todo tipo de pantallas y tamaños de pantalla). Un contenedor flexible estira elementos para llenar el espacio o los comprime para evitar que se desborden.

Lo más importante es que un diseño de flexbox es independiente de la dirección, a diferencia de los diseños normales (cuadros dispuestos verticalmente y elementos en línea dispuestos horizontalmente). Si bien el diseño normal es excelente para páginas web, carece de la flexibilidad (sin juego de palabras) para admitir aplicaciones grandes o complejas (especialmente cuando se trata de cambiar la orientación de la pantalla, cambiar el tamaño, estirar, encoger, etc.).

Comentario: El diseño Flexbox es más adecuado para componentes de aplicaciones y diseños a pequeña escala, mientras que el diseño Grid se usa más para diseños a gran escala.

Lo esencial

Porque flexbox es un módulo completo, no solo una propiedad, combina muchas propiedades. Algunos de ellos deben aplicarse al contenedor (elemento padre, llamado contenedor flexible), mientras que otras propiedades se aplican a elementos secundarios, o elementos flexibles.

Si un diseño normal se basa en las direcciones de flujo de los elementos en línea y en bloque, entonces un diseño flexible se basa en "direcciones de flujo flexibles". Consulte este diagrama de la especificación que explica la idea básica detrás de los diseños flexibles.

Básicamente los elementos se distribuirán a lo largo eje principal(de inicio principal antes extremo principal), o junto eje transversal(de inicio cruzado antes extremo cruzado).

eje principal- el eje principal a lo largo del cual se ubican los elementos flexibles. Tenga en cuenta que no tiene que ser horizontal, todo depende de la propiedad de dirección flexible (ver más abajo).
inicio principal | extremo principal- Los elementos flexibles se colocan en el contenedor desde la posición inicial principal hasta la posición final principal.
tamaño principal- ancho o alto del elemento flexible dependiendo del valor principal seleccionado. La cantidad base puede ser el ancho o el alto del elemento.
eje transversal- eje transversal perpendicular al principal. Su dirección depende de la dirección del eje principal.
inicio cruzado | extremo cruzado- Las líneas flexibles se llenan con elementos y se colocan en el contenedor desde la posición inicial transversal hasta la posición final transversal.
tamaño de cruz- el ancho o alto del elemento flexible, dependiendo de la dimensión seleccionada, es igual a este valor. Esta propiedad es igual que el ancho o alto del elemento dependiendo de la dimensión seleccionada.

Propiedades

pantalla: flexible | flexible en línea;

Se aplica a:

Define un contenedor flexible (en línea o en bloque según el valor seleccionado), conecta un contexto flexible para todos sus hijos inmediatos.

mostrar: otros valores | flexionar | flexible en línea;

Tenga en cuenta:

Las columnas CSS no funcionan con el contenedor flexible
float, clear y vertical-align no funcionan con elementos flexibles