Hogar
Comenzar
Flex estira los elementos para adaptarlos a su ancho. La guía completa de Flexbox. Establecer dimensiones flexibles con una propiedad: flex

Flex estira los elementos para adaptarlos a su ancho. La guía completa de Flexbox. Establecer dimensiones flexibles con una propiedad: flex

Especificación de Flexbox (módulo de diseño de caja flexible) es un método para posicionar elementos en direcciones horizontales o verticales.

Flexbox combina un conjunto de propiedades para un contenedor flexible principal y para elementos flexibles secundarios.

Para que un elemento se convierta en un contenedor flexible, se debe asignar pantalla: flexible; o pantalla: flexible en línea;(bloque o línea respectivamente).

En el interior del contenedor flexible se crean dos ejes: el principal y los ejes transversales perpendiculares al mismo.

Primero, los elementos flexibles se alinean a lo largo del eje principal y luego a lo largo del transversal.
Propiedades del contenedor flexible dirección flexible
  • Define la dirección del eje principal. Valores posibles: fila
  • – de izquierda a derecha (predeterminado); fila inversa
  • – de derecha a izquierda; columna
  • - De arriba hacia abajo; columna-inversa
– de abajo hacia arriba. envoltura flexible
  • Determina si el contenedor es de varias líneas. Valores posibles: ahorarap
  • – los elementos flexibles se alinean en una línea, si no caben en el contenedor, van más allá de sus límites (por defecto); envoltura
  • – los elementos flexibles se alinean en varias líneas si no encajan en una; envoltura inversa – los elementos flexibles se alinean en una línea, si no caben en el contenedor, van más allá de sus límites (por defecto);- parece
, pero la transferencia se produce de abajo hacia arriba. flujo flexible
Define dos parámetros a la vez: flex-direction y flex-wrap.
Por ejemplo, flujo flexible: ajuste de columna; justificar-contenido
  • Determina la alineación de elementos a lo largo del eje principal. Valores posibles: inicio flexible
  • – los elementos flexibles se presionan al comienzo del eje principal (por defecto); extremo flexible
  • – los elementos flexibles se presionan contra el extremo del eje principal; centro
  • – los elementos flexibles están alineados con el centro del eje principal; espacio entre
  • – los elementos flexibles se distribuyen a lo largo del eje principal, con el primer elemento presionado al principio del eje y el último al final; espacio alrededor – los elementos flexibles se distribuyen a lo largo del eje principal, mientras que espacio libre
dividido en partes iguales entre los elementos. Pero vale la pena señalar que los espacios se suman y la distancia entre elementos es el doble que la distancia entre los bordes del contenedor y los elementos más externos.
  • Determina la alineación de elementos a lo largo del eje principal. Valores posibles: alinear elementos
  • – los elementos flexibles se presionan al comienzo del eje principal (por defecto); Determina la alineación de elementos a lo largo del eje transversal. Valores posibles:
  • – los elementos flexibles se presionan contra el extremo del eje principal;– los elementos flexibles se presionan al comienzo del eje transversal (por defecto);
  • – los elementos flexibles se presionan contra el extremo del eje transversal;– los elementos flexibles están alineados a lo largo de su línea base.
  • La línea de base es una línea imaginaria que recorre el borde inferior de los caracteres sin tener en cuenta los salientes, como los de las letras “d”, “r”, “ts”, “sch”; estirar La línea de base es una línea imaginaria que recorre el borde inferior de los caracteres sin tener en cuenta los salientes, como los de las letras “d”, “r”, “ts”, “sch”;– los elementos flexibles se estiran, ocupando todo el espacio disponible a lo largo del eje transversal. Pero si los elementos tienen una altura determinada, entonces
será ignorado. alinear contenido
  • Determina la alineación de elementos a lo largo del eje principal. Valores posibles: Determina la alineación del eje transversal de filas enteras de elementos flexibles. Valores posibles:
  • – los elementos flexibles se presionan al comienzo del eje principal (por defecto);– las filas de elementos flexibles se presionan hasta el comienzo del eje transversal (por defecto);
  • – los elementos flexibles se presionan contra el extremo del eje principal;– se presionan filas de elementos flexibles contra el extremo del eje transversal;
  • – los elementos flexibles están alineados con el centro del eje principal;– las filas de elementos flexibles están alineadas con el centro del eje transversal;
  • – los elementos flexibles se distribuyen a lo largo del eje principal, con el primer elemento presionado al principio del eje y el último al final;– las filas de elementos flexibles se distribuyen a lo largo del eje transversal, con la primera fila presionada hacia el principio del eje y la última hacia el final;
  • La línea de base es una línea imaginaria que recorre el borde inferior de los caracteres sin tener en cuenta los salientes, como los de las letras “d”, “r”, “ts”, “sch”;– las filas de elementos flexibles se distribuyen a lo largo del eje transversal, con el espacio libre dividido equitativamente entre las filas. La línea de base es una línea imaginaria que recorre el borde inferior de los caracteres sin tener en cuenta los salientes, como los de las letras “d”, “r”, “ts”, “sch”;– los elementos flexibles se estiran, ocupando todo el espacio disponible a lo largo del eje transversal. Pero si los elementos tienen una altura determinada, entonces

Pero vale la pena señalar que los espacios se suman y la distancia entre las líneas es el doble de la distancia entre los bordes del contenedor y las líneas más externas.

– las filas de elementos flexibles se estiran ocupando todo el espacio disponible a lo largo del eje transversal. Pero si los elementos tienen una altura determinada, entonces
Esta propiedad no funciona para un contenedor flexible de una sola línea. Propiedades del elemento flexible Esta propiedad no funciona para un contenedor flexible de una sola línea. orden
Determina el orden en el que aparece un único elemento flexible dentro de un contenedor flexible. Especificado como un número entero. El valor predeterminado es 0, luego los elementos se suceden entre sí en un orden de flujo natural. Significado especifica el peso de la posición del elemento en la secuencia, en lugar de su posición absoluta.
base flexible Define el tamaño base de un elemento flexible antes de asignar espacio dentro del contenedor. Se puede especificar en px, %, em y otras unidades de medida. Básicamente, se trata de una especie de punto de partida con respecto al cual se estira o comprime el elemento.
Valor predeterminado – Determina cuánto, si no hay suficiente espacio, el elemento flexible se contraerá en relación con la reducción de los elementos vecinos dentro del contenedor flexible. Especificado por un número entero que sirve como proporción. El valor predeterminado es 1. Si un elemento flexible está configurado en contracción flexible: 2
, entonces se restará el doble de su tamaño base que de otros si el contenedor es más pequeño que la suma de los tamaños base de los elementos que contiene. doblar
Define tres parámetros a la vez: flex-grow, flex-shrink, flex-basis.
Por ejemplo, flexionar: 1 1 200px; alinearse dividido en partes iguales entre los elementos. Anula la alineación predeterminada o
  • Determina la alineación de elementos a lo largo del eje principal. Valores posibles:, para un elemento flexible específico. Valores posibles:
  • – los elementos flexibles se presionan al comienzo del eje principal (por defecto);– el elemento flexible se presiona hasta el comienzo del eje transversal (por defecto);
  • – los elementos flexibles se presionan contra el extremo del eje principal;– el elemento flexible se presiona contra el extremo del eje transversal;
  • – los elementos flexibles se presionan contra el extremo del eje transversal;– el elemento flexible está alineado con el centro del eje transversal;
  • La línea de base es una línea imaginaria que recorre el borde inferior de los caracteres sin tener en cuenta los salientes, como los de las letras “d”, “r”, “ts”, “sch”;– el elemento flexible está alineado con la línea de base; La línea de base es una línea imaginaria que recorre el borde inferior de los caracteres sin tener en cuenta los salientes, como los de las letras “d”, “r”, “ts”, “sch”;– los elementos flexibles se estiran, ocupando todo el espacio disponible a lo largo del eje transversal. Pero si los elementos tienen una altura determinada, entonces

– los elementos flexibles se estiran ocupando todo el espacio disponible a lo largo del eje transversal. Pero si se da la altura, entonces

Características del uso de Flexbox en la práctica.

1. Alineación correcta La guía completa de CSS Flexbox. Esta guía completa explica todo sobre flexbox, centrándose en todos posibles propiedades

para el elemento principal (contenedor flexible) y los elementos secundarios (elementos flexibles). También incluye historial, demostraciones, plantillas y una tabla de compatibilidad con el navegador.

Fondo

flujo flexible (se aplica a: el elemento principal del contenedor flexible) Propiedades del contenedor flexible Esta es una abreviatura de – de abajo hacia arriba. Y propiedades que en conjunto definen los ejes principal y transversal del contenedor flexible. El valor predeterminado es.

fila ahorarap<‘flex-direction’> || <‘flex-wrap’>

Flujo flexible:

justificar-contenido

Esta propiedad determina la alineación a lo largo del eje mayor. Ayuda a distribuir el espacio libre restante cuando todos los elementos flexibles de una fila son inflexibles o son flexibles pero han alcanzado su tamaño máximo. Esto también proporciona cierto control sobre la alineación de los elementos cuando desbordan la línea.

  • Determina la alineación de elementos a lo largo del eje principal. Valores posibles: Contenedor (justificar contenido: inicio flexible | final flexible | centro | espacio entre | espacio alrededor | espacio uniformemente | inicio | fin | izquierda | derecha ... + seguro | inseguro;)
  • – los elementos flexibles se presionan al comienzo del eje principal (por defecto);(predeterminado): los elementos se desplazan al comienzo de la dirección de flexión.
  • : Los elementos se mueven hacia el final de la dirección de flexión. comenzar : los elementos se mueven al principio modo de escritura
  • instrucciones. fin : los elementos se mueven al principio modo de escritura
  • : los elementos se desplazan al final izquierda Propiedades del contenedor flexible: los elementos se desplazan hacia el borde izquierdo del contenedor si esto no tiene sentido : Los elementos se mueven hacia el final de la dirección de flexión..
  • , entonces se comporta como: los elementos se desplazan hacia el borde derecho del contenedor si esto no tiene sentido Propiedades del contenedor flexible: los elementos se desplazan hacia el borde izquierdo del contenedor si esto no tiene sentido : Los elementos se mueven hacia el final de la dirección de flexión..
  • – los elementos flexibles se presionan contra el extremo del eje principal;: los elementos están centrados a lo largo de la línea
  • – los elementos flexibles están alineados con el centro del eje principal;: los elementos están distribuidos uniformemente a lo largo de la línea; el primer elemento está al principio de la línea, el último elemento está al final de la línea
  • – los elementos flexibles se distribuyen a lo largo del eje principal, con el primer elemento presionado al principio del eje y el último al final;: Los elementos están espaciados uniformemente a lo largo de una línea con el mismo espacio alrededor de ellos. Tenga en cuenta que visualmente los espacios no son iguales, ya que todos los elementos tienen el mismo espacio en ambos lados. El primer elemento tendrá una unidad de espacio contra el borde del contenedor, pero dos unidades de espacio entre el siguiente elemento, porque el siguiente elemento tiene su propio espaciado que se aplica.
  • uniformemente en el espacio: Los elementos se distribuyen de modo que la distancia entre dos elementos cualesquiera (y la distancia a los bordes) sea la misma.
Tenga en cuenta que la compatibilidad del navegador con estos valores tiene sus propios matices. Por ejemplo, – los elementos flexibles están alineados con el centro del eje principal; Nunca obtuve soporte para Edge y el inicio/fin/izquierda/derecha aún no está en Chrome. En MDN. Los valores más seguros son Determina la alineación de elementos a lo largo del eje principal. Valores posibles:, – los elementos flexibles se presionan al comienzo del eje principal (por defecto); Esta es una abreviatura de – los elementos flexibles se presionan contra el extremo del eje principal;.

También hay dos palabras clave adicionales que puede asociar con estos valores: seguro Esta es una abreviatura de inseguro. Uso seguro asegura que por mucho que hagas este tipo de posicionamiento, no podrás posicionar el elemento para que aparezca fuera de la pantalla (como en la parte superior) para que el contenido tampoco se pueda desplazar (esto se llama " pérdida de datos").

alinear elementos


Esta propiedad define el comportamiento predeterminado de cómo se distribuyen los elementos flexibles a lo largo del eje transversal de la línea actual. Piense en ello como la versión de justificación de contenido para el eje transversal (perpendicular al eje principal).

Contenedor (elementos de alineación: estiramiento | inicio flexible | final flexible | centro | línea de base | primera línea de base | última línea de base | inicio | fin | inicio automático | fin automático + ... seguro | inseguro;)

  • La línea de base es una línea imaginaria que recorre el borde inferior de los caracteres sin tener en cuenta los salientes, como los de las letras “d”, “r”, “ts”, “sch”;(predeterminado): estirar para llenar el contenedor (aún se respetan el ancho mínimo y el ancho máximo)
  • Determina la alineación de elementos a lo largo del eje principal. Valores posibles: / : Los elementos se mueven hacia el final de la dirección de flexión. / autocomienzo: los elementos se colocan al comienzo del eje transversal. La diferencia entre ellos es pequeña y radica en el cumplimiento. Propiedades del contenedor flexible reglas o : los elementos se mueven al principio normas
  • – los elementos flexibles se presionan al comienzo del eje principal (por defecto); / instrucciones. / fin propio: Los elementos se ubican al final del eje transversal. La diferencia vuelve a ser sutil y radica en el cumplimiento Propiedades del contenedor flexible o : los elementos se mueven al principio normas
  • – los elementos flexibles se presionan contra el extremo del eje principal;: los elementos están centrados en el eje transversal
  • – los elementos flexibles se presionan contra el extremo del eje transversal;: los elementos están alineados con su línea base
seguro Esta es una abreviatura de inseguro Las palabras clave modificadoras se pueden usar en combinación con todas estas palabras clave (aunque esto no es compatible con todos los navegadores), esto ayuda a evitar que los elementos se alineen de tal manera que el contenido sea inaccesible.

alinear contenido

Esta propiedad alinea líneas dentro de un contenedor flexible cuando hay espacio extra en el eje transversal, similar a Por ejemplo, flujo flexible: ajuste de columna; Alinea elementos individuales dentro de un eje principal.

Nota: Esta propiedad no tiene ningún efecto cuando solo hay una fila de elementos flexibles.

Contenedor (alinear contenido: inicio flexible | final flexible | centro | espacio entre | espacio alrededor | espacio uniformemente | estiramiento | inicio | fin | línea de base | primera línea de base | última línea de base + ... seguro | inseguro;)

  • Determina la alineación de elementos a lo largo del eje principal. Valores posibles: / : Los elementos se mueven hacia el final de la dirección de flexión.: elementos movidos al principio del contenedor. Más apoyado Determina la alineación de elementos a lo largo del eje principal. Valores posibles: usos, Propiedades del contenedor flexible mientras : Los elementos se mueven hacia el final de la dirección de flexión. usos : los elementos se mueven al principio dirección.
  • – los elementos flexibles se presionan al comienzo del eje principal (por defecto); / instrucciones.: elementos movidos al final del contenedor. Más apoyado – los elementos flexibles se presionan al comienzo del eje principal (por defecto); usos Propiedades del contenedor flexible mientras instrucciones. usos : los elementos se mueven al principio dirección.
  • – los elementos flexibles se presionan contra el extremo del eje principal;: Los elementos están centrados en el contenedor.
  • – los elementos flexibles están alineados con el centro del eje principal;: los elementos están distribuidos uniformemente; la primera línea está al principio del contenedor y la última línea está al final
  • – los elementos flexibles se distribuyen a lo largo del eje principal, con el primer elemento presionado al principio del eje y el último al final;: Los elementos están espaciados uniformemente con el mismo espacio alrededor de cada fila.
  • uniformemente en el espacio: los elementos se distribuyen uniformemente, con el mismo espacio a su alrededor
  • La línea de base es una línea imaginaria que recorre el borde inferior de los caracteres sin tener en cuenta los salientes, como los de las letras “d”, “r”, “ts”, “sch”;(predeterminado): las líneas se estiran para llenar el espacio restante
seguro Esta es una abreviatura de inseguro Las palabras clave modificadoras se pueden usar en combinación con todas estas palabras clave (aunque esto no es compatible con todos los navegadores), esto ayuda a evitar que los elementos se alineen de tal manera que el contenido sea inaccesible.

Propiedades para los primeros elementos secundarios (elementos flexibles)


orden


De forma predeterminada, los elementos flexibles se organizan en su orden original. Sin embargo, la propiedad Esta propiedad no funciona para un contenedor flexible de una sola línea. controla el orden en el que aparecen en el contenedor flexible.

Artículo (orden: ; /* el valor predeterminado es 0 */ )

crecimiento flexible


Esta propiedad determina la capacidad de un elemento flexible para estirarse cuando sea necesario. Toma un valor a partir de cero, que sirve como proporción. Esta es la propiedad de cuánto espacio disponible dentro de un contenedor flexible debe ocupar un elemento.

Si para todos los elementos base flexible establecido en 1, el espacio restante en el contenedor se distribuirá uniformemente entre todos los elementos secundarios. Si uno de los elementos secundarios tiene un valor de 2, ese elemento ocupará el doble de espacio que los demás (o al menos lo intentará).

Artículo (crecimiento flexible: ; /* predeterminado 0 */ )

flex-contraíble

Esta propiedad determina la capacidad de un elemento flexible para comprimirse cuando sea necesario.

Artículo (flex-shrink: ; /* predeterminado 1 */ )
No se admiten números negativos.

base flexible

Esta propiedad especifica el tamaño predeterminado de un elemento antes de asignar el espacio restante. Esto podría ser una longitud (por ejemplo, 20%, 5rem, etc.) o palabra clave. Palabra clave Significado significa "mira mi propiedad de ancho o alto". Palabra clave contenido significa "tamaño basado en el contenido del elemento" - esta palabra clave todavía no está muy bien soportada, por lo que es difícil comprobar para qué se utiliza contenido máximo, contenido mínimo o contenido adecuado.

Artículo (base flexible: | auto; /* automático predeterminado */ )
Si se establece en 0 , no se tiene en cuenta el espacio adicional alrededor del contenido. Si se establece en Significado, el espacio adicional se distribuye dependiendo de su base flexible significados.

Vea este dibujo.


doblar

Esta es la abreviatura de usar base flexible, Valor predeterminado – Esta es una abreviatura de Determina el orden en el que aparece un único elemento flexible dentro de un contenedor flexible. juntos. Segundo y tercer parámetro ( Valor predeterminado – Esta es una abreviatura de Determina el orden en el que aparece un único elemento flexible dentro de un contenedor flexible.) son opcionales. El valor predeterminado es 0 1 Significado.

Artículo (flexible: ninguno | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }
Se recomienda utilizar esta propiedad abreviada. en lugar de establecer propiedades individuales. Esta reducción fija inteligentemente otros valores.

alinearse


Esta propiedad le permite anular la alineación predeterminada (o especificada usando dividido en partes iguales entre los elementos.) para artículos flexibles individuales.
Por favor mira dividido en partes iguales entre los elementos. propiedad para comprender los valores disponibles.

Artículo ( align-self: auto | flex-start | flex-end | centro | línea de base | estiramiento; )
Tenga en cuenta que las propiedades flotar, claro Esta es una abreviatura de alineación vertical no afectan los elementos flexibles.

Ejemplos

Empecemos con muy ejemplo sencillo resolviendo un problema casi cotidiano: la alineación perfecta. La solución más sencilla para esta tarea es utilizar flexbox.

Parent ( display: flex; height: 300px; /* O lo que sea */ ) .child ( width: 100px; /* O lo que sea */ height: 100px; /* O lo que sea */ margin: auto; /* Magic ! */ )
Esto sucede debido al hecho de que el margen de propiedad de alineación vertical está establecido en Significado En un contenedor flexible, ocupa espacio adicional. Entonces estableciendo el margen en Significado Hará que el objeto quede perfectamente centrado en ambos ejes.

Ahora usemos algunas propiedades más. Considere una lista de 6 elementos, todos con tamaños fijos, pero también puede haber tamaños automáticos. Queremos que se distribuyan uniformemente a lo largo del eje horizontal para que cuando cambie el tamaño del navegador, todo se escale bien y sin consultas de medios.

Contenedor flexible ( /* Primero creamos un contexto flexible */ display: flex; /* Luego definimos una dirección flexible y permitimos que los elementos se ajusten a nuevas líneas * Recuerde que esto es lo mismo que: * dirección flexible: fila ; * flex-wrap: wrap; */ flex-flow: row wrap /* Luego determinamos cómo se distribuye el espacio restante */ justify-content: space-around;
Listo. Todo lo demás es sólo estilo.

Si cambia la resolución o escala de la pantalla, se verá así:

Intentemos algo más. Imaginemos que tenemos elementos de navegación alineados a la derecha en la parte superior de nuestro sitio web, pero queremos que estén justificados en pantallas de tamaño mediano y en una sola columna en pequeños dispositivos. Es bastante simple.

/* Pantallas grandes */ .navigation ( display: flex; flex-flow: row wrap; /* Esto alineará los elementos al final de la línea en el eje principal */ justify-content: flex-end; ) /* Pantallas medianas */ @ media all and (max-width: 800px) ( .navigation ( /* En pantallas de tamaño mediano, centramos los elementos distribuyendo uniformemente el espacio en blanco alrededor de los elementos */ justify-content: space-around; ) ) /* Pantallas pequeñas */ @media all and (max-width: 500px) ( .navigation ( /* En pantallas pequeñas ya no usamos la dirección de fila, sino la columna */ flex-direction: column; ) )

Pantallas grandes


Pantallas medianas


Pantallas pequeñas



¡Probemos algo aún mejor jugando con la flexibilidad de los elementos flexibles! ¿Qué tal un diseño de página completa de 3 columnas con encabezado y pie de página? Y no depende del orden inicial de los elementos.

Wrapper ( display: flex; flex-flow: row wrap; ) /* Decimos que todos los elementos tienen un ancho del 100%, a través de flex-base */ .wrapper > * ( flex: 1 100%; ) /* Usamos el pedido original para la primera opción móvil * 1. encabezado * 2. artículo * 3. aparte 1 * 4. aparte 2 * 5. pie de página */ /* Pantallas intermedias */ @media all and (min-width: 600px) ( /* Le decimos a ambas barras laterales que estén en la misma línea */ .aside ( flex: 1 auto; ) ) /* Pantallas grandes */ @media all and (min-width: 800px) ( /* Invertimos el orden de las primera barra lateral y la principal y decirle al elemento principal para que ocupe el doble del ancho de las otras dos barras laterales */ .main ( flex: 2 0px; ) .aside-1 ( orden: 1; ) .main ( orden : 2; ) .aside-2 ( orden : 3; ) .footer ( orden: 4; ) )

@mixin flexbox() ( mostrar: -webkit-box; mostrar: -moz-box; mostrar: -ms-flexbox; mostrar: -webkit-flex; mostrar: flex; ) @mixin flex($valores) ( -webkit- box-flex: $valores; -moz-box-flex: $valores; -webkit-flex: $valores ) @mixin order($val) ( -webkit- box-ordinal-group: $val; -moz-box -grupo-ordinal: $val; -ms-flex-order: $val; -webkit-order: $flexbox();

Errores

Por supuesto, Flexbox no está exento de errores. La mejor colección de estos que he visto es Flexbugs de Philip Walton y Greg Whitworth. Este es un repositorio abierto código fuente para realizar un seguimiento de todos ellos, por lo que creo que es mejor simplemente vincularlos.

Soporte del navegador

Desglosado por “versión” de flexbox:
  • (nuevo) significa sintaxis reciente de la especificación (por ejemplo pantalla: flexible;)
  • (tweener) significa sintaxis no oficial extraña desde 2011 (p. ej. pantalla: caja flexible;)
  • (antiguo) significa sintaxis antigua desde 2009 (p. ej. pantalla: caja;)

Blackberry Browser 10+ admite la nueva sintaxis.

para recibir información adicional sobre cómo mezclar sintaxis para obtener una mejor compatibilidad con el navegador, consulte

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 eran como redes de un solo hilo. documentos de texto, un poco más tarde, la división de la página en bloques se hizo con tablas, luego se puso de moda componer con flotantes, y tras la muerte oficial de ie6 también se agregaron técnicas con inline-block. 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 fila (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 – de abajo hacia arriba.:

  • ahorarap (valor predeterminado): 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 – los elementos flexibles se alinean en una línea, si no caben en el contenedor, van más allá de sus límites (por defecto);, 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 será ignorado.:

  • 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 predeterminado): 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 único 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 solo 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 propia 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 predeterminado): 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

elemento1
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

  1. No debes usar flexbox donde no sea necesario.
  2. 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énselo bien.
  3. Comprenda flexbox y conozca los conceptos básicos. Esto hace que sea mucho más fácil lograr el resultado esperado.
  4. 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.
  5. 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.
  6. Flexbox es muy adecuado para el diseño de componentes web y partes individuales de páginas web, pero no ha mostrado su mejor cara 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

En conclusión

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 solución de una gran cantidad de problemas. Y, por supuesto, debes intentar trabajar con él ahora. Uno de los siguientes artículos estará dedicado a ejemplos específicos de trabajo con diseño flexible. Suscríbete a las noticias;)

En resumen, el diseño con Flexbox nos brinda soluciones simples tareas que alguna vez fueron difíciles. Por ejemplo, cuando necesita alinear un elemento verticalmente, presionar el pie de página hacia la parte inferior de la pantalla, o simplemente insertar varios bloques en una fila para que ocupen todo el espacio libre. Problemas similares se pueden resolver sin flex. Pero, por regla general, estas soluciones se parecen más a "muletas": técnicas para utilizar CSS para fines distintos a los previstos. Mientras que con Flexbox estas tareas se resuelven exactamente como se pretende con el modelo Flex.

CSS Flexible Box Layout Module (módulo CSS para diseños con bloques flexibles), abreviado flexbox, fue creado para eliminar las deficiencias al crear una amplia variedad de diseños HTML, incluidos aquellos adaptados a diferentes anchos y alturas, y hacer que el diseño sea lógico y simple. . Y un enfoque lógico, por regla general, funciona en lugares inesperados, donde no se ha comprobado el resultado: ¡la lógica lo es todo!

Flexbox le permite controlar elegantemente una variedad de parámetros de elementos dentro de un contenedor: dirección, orden, ancho, alto, alineación a lo largo y ancho, distribución del espacio libre, estiramiento y compresión de elementos.

Conocimientos básicos

Un FlexBox consta de un Contenedor y sus Elementos (elementos flexibles).

Para habilitar flexbox, cualquiera elemento HTML simplemente asigne la propiedad CSS display:flex; o pantalla: inline-flex; .

1
2

Después de habilitar la propiedad flex, se crean dos ejes dentro del contenedor: principal y transversal (perpendicular (⊥), eje transversal). Todos los elementos anidados (del primer nivel) están alineados a lo largo del eje principal. De forma predeterminada, el eje principal es horizontal y está dirigido de izquierda a derecha (→), y el eje transversal es correspondientemente vertical y está dirigido de arriba a abajo (↓).

Los ejes principal y transversal se pueden intercambiar, luego los elementos se ubicarán de arriba a abajo (↓) y cuando ya no encajen en altura, se moverán de izquierda a derecha (→) - es decir, los ejes simplemente intercambiaron lugares . En este caso, el principio y el final de la disposición de los elementos no cambian, ¡solo cambian las direcciones (ejes)! Por eso es necesario imaginar los ejes dentro del contenedor. Sin embargo, no se debe pensar que existen unos ejes “físicos” y que influyen en algo. El eje aquí es simplemente la dirección del movimiento de los elementos dentro del contenedor. Por ejemplo, si especificamos la alineación de los elementos al centro del eje principal y luego cambiamos la dirección de este eje principal, entonces la alineación cambiará: los elementos estaban en el medio horizontalmente, pero se convirtieron en el medio verticalmente... Vea el ejemplo.

Otra característica importante de Flexbox es la presencia de filas en dirección transversal. Para entender de qué estamos hablando, imaginemos que hay un eje horizontal principal, hay muchos elementos y no “caben” en el contenedor, por lo que pasan a otra fila. Aquellos. un contenedor se ve así: un contenedor con dos filas en su interior, cada fila contiene varios elementos. ¿Presentado? ¡Ahora recuerda que podemos alinear verticalmente no solo elementos, sino también filas! Cómo funciona esto se ve claramente en el ejemplo de la propiedad. Y así es como se ve esquemáticamente:

Propiedades CSS, que puede afectar el modelo de diseño: las columnas flotantes, claras, de alineación vertical no funcionan en el diseño flexible. Aquí se utiliza un modelo diferente para construir un diseño y estas propiedades CSS simplemente se ignoran.

Propiedades CSS de Flexbox

Flexbox contiene diferentes reglas CSS para controlar todo el diseño flexible. Algunos deben aplicarse al contenedor principal y otros a los elementos de este contenedor.

Para contenedor

mostrar:

Habilita la propiedad flexible para el elemento. Esta propiedad cubre el elemento en sí y sus elementos anidados: solo se ven afectados los descendientes de primer nivel; se convertirán en elementos del contenedor flexible.

  • , entonces se restará el doble de su tamaño base que de otros si el contenedor es más pequeño que la suma de los tamaños base de los elementos que contiene.- el elemento se extiende en todo su ancho y tiene todo su espacio entre los bloques circundantes. Los saltos de línea ocurren al principio y al final del bloque.
  • flexible en línea- un elemento se envuelve alrededor de otros elementos. En este caso, su parte interna tiene el formato de elemento de bloque y el elemento en sí tiene el formato en línea.

flex e inline-flex se diferencian en que interactúan de manera diferente con los elementos circundantes, similar a display:block y display:inline-block.

dirección flexible:

Cambia la dirección del eje principal del contenedor. El eje transversal cambia en consecuencia.

  • fila (predeterminada)- dirección de los elementos de izquierda a derecha (→)
  • – de derecha a izquierda;- dirección de los elementos de arriba a abajo (↓)
  • – de izquierda a derecha (predeterminado);- dirección de los elementos de derecha a izquierda (←)
  • - De arriba hacia abajo;- dirección de los elementos de abajo hacia arriba ()
envoltura flexible:

Controla el traslado de elementos que no caben en el contenedor.

  • nowrap (predeterminado)- Los elementos anidados se colocan en una fila (con dirección=fila) o en una columna (con dirección=columna) independientemente de si caben en el contenedor o no.
  • – los elementos flexibles se alinean en una línea, si no caben en el contenedor, van más allá de sus límites (por defecto);- incluye mover elementos a la siguiente fila si no caben en el contenedor. Esto permite el movimiento de elementos a lo largo del eje transversal.
  • – los elementos flexibles se alinean en varias líneas si no encajan en una;- Lo mismo que envolver, solo que la transferencia no será hacia abajo, sino hacia arriba (en la dirección opuesta).
flujo flexible: envoltura de dirección

Combina propiedades de dirección flexible y envoltura flexible. A menudo se usan juntos, por lo que para escribir menos código, se creó la propiedad flex-flow.

flex-flow acepta los valores de estas dos propiedades, separadas por un espacio. O puede especificar un valor único para cualquier propiedad.

/* solo dirección flexible */ flex-flow: fila; flujo flexible: fila inversa; flujo flexible: columna; flujo flexible: columna inversa; /* solo flex-wrap */ flex-flow: nowrap; flujo flexible: envoltura; flujo flexible: envoltura inversa; /* ambos valores a la vez: flex-direction y flex-wrap */ flex-flow: row nowrap; flujo flexible: envoltura de columna; flujo flexible: columna-inversa envoltura-inversa;

justificar-contenido:

  • Alinea elementos a lo largo del eje principal: si dirección=fila, entonces horizontalmente, y si dirección=columna, entonces verticalmente. inicio flexible (predeterminado)
  • – los elementos flexibles se presionan al comienzo del eje principal (por defecto);- los elementos irán desde el principio (puede quedar algo de espacio al final).
  • – los elementos flexibles se presionan contra el extremo del eje principal;- los elementos están alineados al final (el espacio permanecerá al principio)
  • – los elementos flexibles están alineados con el centro del eje principal;- en el centro (el espacio permanecerá a la izquierda y a la derecha)
  • – los elementos flexibles se distribuyen a lo largo del eje principal, con el primer elemento presionado al principio del eje y el último al final;- los elementos más externos se presionan contra los bordes (el espacio entre los elementos se distribuye uniformemente)
  • uniformemente en el espacio
- el espacio libre se distribuye uniformemente entre los elementos (los elementos más externos no presionan contra los bordes). 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.

alinear contenido:

Nota: Funciona cuando hay al menos 2 filas, es decir. Si solo hay 1 fila, no pasará nada.

Aquellos. Si flex-direction: fila, entonces esta propiedad alineará las filas invisibles verticalmente. Es importante señalar aquí que la altura del bloque debe establecerse rígidamente y debe ser mayor que la altura de las filas; de lo contrario, las filas mismas estirarán el contenedor y cualquier alineación de ellas perderá sentido, porque no hay espacio libre entre ellas. ellos... Pero cuando flex-direction: column , entonces las filas se mueven horizontalmente → y el ancho del contenedor casi siempre es mayor que el ancho de las filas y alinear las filas inmediatamente tiene sentido...

  • estirar (predeterminado)- las filas se estiran para llenar la fila por completo
  • Determina la alineación de elementos a lo largo del eje principal. Valores posibles:- las filas se agrupan en la parte superior del contenedor (puede quedar algo de espacio al final).
  • – los elementos flexibles se presionan al comienzo del eje principal (por defecto);- las filas se agrupan en la parte inferior del contenedor (el espacio permanecerá al principio)
  • – los elementos flexibles se presionan contra el extremo del eje principal;- las filas se agrupan en el centro del contenedor (quedará espacio en los bordes)
  • – los elementos flexibles están alineados con el centro del eje principal;- las filas exteriores se presionan contra los bordes (el espacio entre las filas se distribuye uniformemente)
  • – los elementos flexibles se distribuyen a lo largo del eje principal, con el primer elemento presionado al principio del eje y el último al final;- el espacio libre se distribuye uniformemente entre las filas (los elementos exteriores no se presionan contra los bordes). 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.
  • uniformemente en el espacio- Lo mismo que space-around , solo que la distancia entre los elementos exteriores y los bordes del contenedor es la misma que entre los elementos.
alinear elementos:

Alinea elementos a lo largo del eje transversal dentro de una fila (fila invisible). Aquellos. Las filas en sí se alinean mediante align-content, y los elementos dentro de estas filas (filas) se alinean mediante align-items y a lo largo del eje transversal. No existe tal división a lo largo del eje principal, no existe el concepto de filas y los elementos se alinean mediante justify-content.

  • estirar (predeterminado)- los elementos se estiran para llenar la línea por completo
  • Determina la alineación de elementos a lo largo del eje principal. Valores posibles:- los elementos se presionan hasta el principio de la fila
  • – los elementos flexibles se presionan al comienzo del eje principal (por defecto);- los elementos se presionan hasta el final de la fila
  • – los elementos flexibles se presionan contra el extremo del eje principal;- los elementos están alineados con el centro de la fila
  • – los elementos flexibles se presionan contra el extremo del eje transversal;- los elementos están alineados con la línea base del texto

Para elementos contenedores

crecimiento flexible:

Establece el factor de ampliación del elemento cuando hay espacio libre en el contenedor. Crecimiento flexible predeterminado: 0, es decir Ninguno de los elementos debe crecer y llenar el espacio libre en el contenedor.

Crecimiento flexible predeterminado: 0

  • Si especifica flex-grow:1 para todos los elementos, todos se estirarán por igual y llenarán todo el espacio libre en el contenedor.
  • Si especifica flex-grow:1 a uno de los elementos, llenará todo el espacio libre en el contenedor y las alineaciones mediante justify-content ya no funcionarán: no hay espacio libre para alinear...
  • Con crecimiento flexible:1. Si uno de ellos tiene flex-grow:2 entonces será 2 veces más grande que todos los demás.
  • Si todas las cajas flexibles dentro de un contenedor flexible tienen flex-grow:3, entonces tendrán el mismo tamaño
  • Con flex-grow:3. Si uno de ellos tiene flex-grow:12 entonces será 4 veces más grande que todos los demás

¿Cómo funciona esto? Digamos que un contenedor tiene 500 px de ancho y contiene dos elementos, cada uno con un ancho base de 100 px. Esto significa que quedan 300 píxeles libres en el contenedor. Ahora, si especificamos flex-grow:2; , y el segundo flex-grow: 1; , entonces los bloques ocuparán todo el ancho disponible del contenedor y el ancho del primer bloque será de 300px y del segundo de 200px. Esto se explica por el hecho de 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.

Nota: puede especificar números fraccionarios en el valor, por ejemplo: 0,5 - flex-grow:0,5

contracción flexible:

Establece el factor de reducción del elemento. La propiedad es lo opuesto a flex-grow y determina cómo debe reducirse el elemento si no queda espacio libre en el contenedor. Aquellos. la propiedad comienza a funcionar cuando la suma de los tamaños de todos los elementos es mayor que el tamaño del contenedor.

Flex-contracción predeterminada: 1

Digamos que el contenedor tiene 600 px de ancho y contiene dos elementos, cada uno de 300 px de ancho: flex-basis:300px; . Aquellos. dos elementos llenan completamente el contenedor. Dale al primer elemento flex-shrink: 2; , y el segundo flex-shrink: 1; . Ahora reduzcamos el ancho del contenedor en 300 px, es decir. Los elementos deben reducirse en 300 px para caber dentro del contenedor. Se encogerán en una proporción de 2:1, es decir. el primer bloque se reducirá en 200 px, el segundo en 100 px y los nuevos tamaños de elementos pasarán a ser 100 px y 200 px.

Nota: puede especificar números fraccionarios en el valor, por ejemplo: 0,5 - flex-shrink:0,5

base flexible:

Establece el ancho base del elemento: el ancho antes de que se calculen otras condiciones que afectan el ancho del elemento. El valor se puede especificar en px, em, rem, %, vw, vh, etc. El ancho final dependerá del ancho base y de los valores de flex-grow, flex-shrink y el contenido dentro del bloque. Con auto, el elemento obtiene un ancho base relativo al contenido que contiene.

Predeterminado: automático

A veces es mejor establecer el ancho de un elemento mediante la propiedad de ancho habitual. Por ejemplo, ancho: 50%; significará que el elemento dentro del contenedor será exactamente el 50%, pero las propiedades de crecimiento flexible y contracción flexible seguirán funcionando. Esto puede ser necesario cuando el contenido dentro de él estira el elemento más de lo especificado en flex-basis. Ejemplo.

flex-basis será "rígido" si estirar y encoger se establecen en cero: flex-basis:200px; crecimiento flexible: 0; contracción flexible: 0; . Todo esto se puede escribir así: flex:0 0 200px; .

flex: (base de crecimiento y contracción)

Un breve resumen de las tres propiedades: flex-grow flex-shrink flex-basis.

Predeterminado: flex: 0 1 auto

Sin embargo, puede especificar uno o dos valores:

Flexión: ninguna; /* 0 0 auto */ /* número */ flex: 2; /* flex-grow (flex-basis va a 0) */ /* no es un número */ flex: 10em; /* base flexible: 10em */ flex: 30px; /* base flexible: 30px */ flex: auto; /* flex-basis: auto */ flex: contenido; /* base flexible: contenido */ flex: 1 30px; /* flex-grow y flex-basis */ flex: 2 2; /* flex-grow y flex-shrink (flex-basis va a 0) */ flex: 2 2 10%; /* flex-grow y flex-shrink y flex-basis */ align-self:

Le permite cambiar la propiedad de alinear elementos, solo para un único elemento.

Predeterminado: desde el contenedor de elementos de alineación

  • La línea de base es una línea imaginaria que recorre el borde inferior de los caracteres sin tener en cuenta los salientes, como los de las letras “d”, “r”, “ts”, “sch”;- el elemento se estira para llenar la línea por completo
  • Determina la alineación de elementos a lo largo del eje principal. Valores posibles:- el elemento se presiona hasta el principio de la línea
  • – los elementos flexibles se presionan al comienzo del eje principal (por defecto);- el elemento se presiona hasta el final de la línea
  • – los elementos flexibles se presionan contra el extremo del eje principal;- el elemento está alineado con el centro de la línea

    • – los elementos flexibles se presionan contra el extremo del eje transversal;- el elemento está alineado con la línea base del texto

orden:

Le permite cambiar el orden (posición, posición) de un elemento en la fila general.

Predeterminado: orden: 0

Por defecto, los elementos tienen orden: 0 y se colocan en el orden de aparición en el código HTML y la dirección de la fila. Pero si cambia el valor de la propiedad de orden, los elementos se organizarán en el orden de los valores: -1 0 1 2 3.... Por ejemplo, si especifica orden: 1 para uno de los elementos, primero irán todos los ceros y luego el elemento con 1.

De esta manera, por ejemplo, puedes mover el primer elemento hasta el final sin cambiar la dirección de movimiento de los elementos restantes o el código HTML.

Notas

¿Cuál es la diferencia entre base flexible y ancho?

A continuación se detallan las diferencias importantes entre base flexible y ancho/alto:

    flex-basis solo funciona para el eje principal. Esto significa que con flex-direction:row flex-basis controla el ancho y con flex-direction:column controla la altura. .

    flex-basis solo se aplica a elementos flexibles. Esto significa que si desactiva flex para un contenedor, esta propiedad no tendrá ningún efecto.

    Los elementos contenedores absolutos no participan en la construcción flexible... Esto significa que flex-basis no afecta los elementos flexibles de un contenedor si están en posición absoluta:absoluta. Deberán especificar ancho/alto.

  • Cuando se utiliza la propiedad flex, se pueden combinar y escribir brevemente 3 valores (flex-grow/flex-shrink/flex-basis), pero para aumentar o reducir el ancho es necesario escribirlos por separado. Por ejemplo: flex:0 0 50% == ancho:50%; contracción flexible: 0; . A veces es simplemente un inconveniente.

Si es posible, siga prefiriendo la base flexible. Utilice el ancho sólo cuando la base flexible no sea apropiada.

La diferencia entre base flexible y ancho: ¿un error o una característica?

El contenido dentro de un elemento flexible lo empuja y no puede ir más allá. Sin embargo, si establece el ancho usando width o max-width en lugar de flex-basis, entonces un elemento dentro de un contenedor flexible podrá extenderse más allá de los límites de ese contenedor (a veces este es exactamente el comportamiento que desea). Ejemplo:

Ejemplos de diseño flexible

En ninguna parte de los ejemplos se utilizan prefijos para la compatibilidad entre navegadores. hice esto por lectura fácil css. Por lo tanto, vea ejemplos en últimas versiones Chrome o Firefox.

#1 Ejemplo simple con alineación vertical y horizontal

Comencemos con el ejemplo más simple: alineación vertical y horizontal al mismo tiempo y a cualquier altura del bloque, incluso el de goma.

Texto en el medio

O así, sin bloque dentro:

Texto en el medio

#1.2 Separación (rotura) entre elementos del bloque flexible

Para colocar elementos del contenedor a lo largo de los bordes y seleccionar aleatoriamente un elemento después del cual habrá una pausa, debe usar la propiedad margin-left:auto o margin-right:auto.

#2 Menú adaptativo en flex

Creemos un menú en la parte superior de la página. En una pantalla ancha debería estar a la derecha. En promedio, alinee en el medio. Y en el pequeño, cada elemento debe estar en una nueva línea.

Inicio Sobre nosotros Productos Contactos

#3 Adaptable 3 columnas

Este ejemplo muestra cómo hacer rápida y cómodamente 3 columnas que, cuando se estrechan, se convertirán en 2 y luego en 1.

Tenga en cuenta que esto se puede hacer sin utilizar reglas de medios, todo está en flexibilidad.

1
2
3
4
5
6

Vaya a jsfiddle.net y cambie el ancho de la sección "resultado"

#4 Bloques adaptativos usando flex

Digamos que necesitamos generar 3 bloques, uno grande y dos pequeños. Al mismo tiempo, es necesario que los bloques se adapten a pantallas pequeñas. Hacemos:

1
2
3

Vaya a jsfiddle.net y cambie el ancho de la sección "resultado"

#5 Galería con flexión y transición

Este ejemplo muestra lo rápido que puedes hacer un lindo acordeón con imágenes usando flex. Preste atención a la propiedad de transición para flex.

#6 Flex to Flex (solo un ejemplo)

La tarea es hacer un bloque flexible. De modo que el comienzo del texto en cada bloque esté en la misma línea horizontalmente. Aquellos. A medida que el ancho se reduce, los bloques crecen en altura. Es necesario que la imagen esté en la parte superior, el botón siempre esté en la parte inferior y el texto en el medio comience a lo largo de una línea horizontal...

Para resolver este problema, los propios bloques se estiran con flexión y se ajustan al ancho máximo posible. Cada unidad interior también es una construcción flexible, con un eje girado dirección flexible:columna; y el elemento en el medio (donde está el texto) está estirado flex-grow:1; para llenar todo el espacio libre, así es como se logra el resultado: el texto comenzó con una línea...

Más ejemplos

Soporte del navegador: 98,3%

Por supuesto, no hay soporte completo, pero todos los navegadores modernos admiten diseños flexbox. Algunos todavía requieren prefijos. Para tener una imagen real, miremos caniuse.com y veamos que el 96,3% de los navegadores utilizados hoy en día funcionarán sin prefijos, y el 98,3% utilizará prefijos. Este es un excelente indicador para utilizar Flexbox con confianza.

Para saber qué prefijos son relevantes hoy (junio de 2019), daré un ejemplo de todas las reglas flexibles con con los prefijos necesarios:

/* Contenedor */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:vertical; -ms-flex-direction:columna; -ms-flex-wrap:wrap; -flex-flow:columna wrap; :justificar; distribuir; align-content:space-around; ) /* Elementos */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms -flex-negativo:2; flex-shrink:2; -ms-flex-preferred-size:100px; -ms-flex:1 2 100px; :3; ​​-ms-orden-flexible:2);

Es mejor si las propiedades con prefijos van antes de la propiedad original.
Esta lista no contiene ningún prefijo que sea innecesario hoy en día (según caniuse), pero en general hay más prefijos.

Cromo Safari Firefox Ópera ES DECIR. Androide iOS
20- (viejo) 3.1+ (antiguo) 2-21 (antiguo) 10 (interpolación) 2.1+ (antiguo) 3.2+ (antiguo)
21+ (nuevo) 6.1+ (nuevo) 22+ (nuevo) 12.1+ (nuevo) 11+ (nuevo) 4.4+ (nuevo) 7.1+ (nuevo)
  • (nuevo) - nueva sintaxis: display: flex; .
  • (tweener) - antigua sintaxis no oficial de 2011: display: flexbox; .
  • (antiguo) - sintaxis antigua de 2009: display: box;

Video

Bueno, no te olvides del vídeo, a veces también es interesante y comprensible. Aquí hay un par de populares:

Enlaces útiles en Flex

    flexboxfroggy.com: juego educativo flexbox.

    Flexplorer es un creador de código visual flexible.

dirección flexible: columna;

Verá que esto coloca los elementos nuevamente en un diseño de columnas, muy parecido a como estaban antes de agregar CSS. Antes de continuar, elimine esta declaración de su ejemplo.

Nota: También puede diseñar elementos flexibles en dirección inversa utilizando los valores de inversión de fila y de columna. ¡Experimenta también con estos valores!

Envase

Un problema que surge cuando tienes una cantidad fija de ancho o alto en tu diseño es que eventualmente tus hijos de flexbox desbordarán su contenedor, rompiendo el diseño. Eche un vistazo a nuestro ejemplo flexbox-wrap0.html e intente verlo en vivo (haga una copia local de este archivo ahora si desea seguir este ejemplo):

Aquí vemos que los niños efectivamente están saliendo de su contenedor. Una forma de solucionar este problema es agregar la siguiente declaración a su elemento que representa una sección independiente, que no tiene un elemento semántico más específico para representarlo contenido en un documento html.>

regla:

Envoltura flexible: envoltura;

flexionar: 200px;

Pruebe esto ahora; Verás que el diseño luce mucho mejor con esto incluido:

Ahora tenemos varias filas: en cada fila se colocan tantos hijos de Flexbox como sea posible, y cualquier desbordamiento se mueve a la siguiente línea. La declaración flex: 200px establecida en los artículos significa que cada uno tendrá al menos 200px de ancho; Analizaremos esta propiedad con más detalle más adelante. También puede notar que los últimos elementos secundarios de la última fila se ensanchan para que toda la fila aún esté llena.

Pero hay más que podemos hacer aquí. En primer lugar, intente cambiar el valor de su propiedad flex-direction a row-reverse - ahora verá que todavía tiene su diseño de múltiples filas, pero comienza desde la esquina opuesta de la ventana del navegador y fluye en sentido inverso.

taquigrafía de flujo flexible

En este punto vale la pena señalar que existe una abreviatura para flex-direction y flex-wrap-flex-flow. Entonces, por ejemplo, puedes reemplazar

Dirección flexible: fila; envoltura flexible: envoltura;

Flujo flexible: envoltura de hileras;

Tamaño flexible de artículos flexibles

Volvamos ahora a nuestro primer ejemplo y veamos cómo podemos controlar qué proporción de espacio ocupan los elementos flexibles. Inicie su copia local de flexbox0.html o tome una copia de flexbox1.html como nuevo punto de partida (verlo). vivir).

Primero, agregue la siguiente regla al final de su CSS:

Artículo (flexible: 1; ) element a value of 1, which means they will all take up an equal amount of the spare space left after things like padding and margin have been set. It is a proportion, meaning that giving each flex item a value of 400000 would have exactly the same effect.!}

Ahora agregue la siguiente regla debajo de la anterior:

Artículo: enésimo tipo (3) (flex: 2;)

Sección - artículo artículo artículo - div - botón botón div botón div botón botón

Veamos el código que hemos utilizado para el diseño.

Resumen

Con esto concluye nuestro recorrido por los conceptos básicos de flexbox. Esperamos que te hayas divertido y que disfrutes jugando mientras avanzas en tu aprendizaje. A continuación veremos otro aspecto importante de los diseños CSS: las cuadrículas CSS.

Comenzar

También te puede gustar