Flexión - Trucos CSS

La flexpropiedad es una subpropiedad del módulo Diseño de caja flexible.

Esta es la forma abreviada de flex-grow, flex-shrinky flex-basis. El segundo y tercer parámetro ( flex-shrinky flex-basis) son opcionales.

Sintaxis

flex: none | ( ? || ) .flex-item ( /* this */ flex: 1 100px; /* is the same as */ flex-grow: 1; flex-basis: 100px; /* and it leaves the flex-shrink property alone, which would be */ flex-shrink: inherit; /* defaults to 1 */ )

Aquí está la primicia sobre a qué se asignan los valores según la cantidad de valores que le dé:

flex: none /* value 'none' case */ flex: /* One value syntax, variation 1 */ flex: /* One value syntax, variation 2 */ flex: /* Two values syntax, variation 1 */ flex: /* Two values syntax, variation 2 */ flex: /* Three values syntax */ flex: inherit

Valores comunes para flex

flex: 0 automático;

Esto es lo mismo que flex: initial;y la taquigrafía para el valor por defecto: flex: 0 1 auto. Ajusta el tamaño del elemento en función de sus propiedades width/ height(o su contenido si no está configurado).

Hace que el elemento flexible sea inflexible cuando queda algo de espacio libre, pero permite que se reduzca al mínimo cuando no hay suficiente espacio. Las capacidades de alineación o los automárgenes se pueden usar para alinear elementos flexibles a lo largo del eje principal.

flex: auto;

Esto es equivalente a flex: 1 1 auto. Tenga cuidado, este no es el valor predeterminado. Dimensiona el artículo según sus propiedades width/ height, pero lo hace completamente flexible para que absorba cualquier espacio adicional a lo largo del eje principal.

Si todos los elementos son o bien flex: auto, flex: initialo flex: none, cualquier espacio que queda después de que los artículos han sido dimensionadas será distribuido de manera uniforme a los elementos con flex: auto.

flex: ninguno;

Esto es equivalente a flex: 0 0 auto. Mide el artículo de acuerdo con sus width/ heightpropiedades, pero lo hace completamente inflexible.

Esto es similar a flex: initialexcepto que no se permite encoger, incluso en una situación de desbordamiento.

flexionar:

Equivalente a flex: 1 0px. Hace que el artículo flexible sea flexible y establece la base flexible en cero, lo que da como resultado un artículo que recibe la proporción especificada del espacio restante.

Si todos los elementos del contenedor flexible utilizan este patrón, sus tamaños serán proporcionales al factor flexible especificado.

Manifestación

La siguiente demostración muestra un diseño muy simple con Flexbox gracias a la flexpropiedad:

Aquí está el fragmento de código más relevante:

.header, .footer ( flex: 1 100%; ) .sidebar ( flex: 1; ) .main ( flex: 2; )

Primero, hemos autorizado que los elementos flexibles se muestren en varias filas con flex-flow: row wrap.

Luego le decimos tanto al encabezado como al pie de página que tomen el 100% del ancho actual de la ventana gráfica, pase lo que pase.

Y el contenido principal y ambas barras laterales compartirán la misma fila, compartiendo el espacio restante de la siguiente manera: 66% (2 / (1 + 2)) para el contenido principal, 33% (1 / (1 + 2)) para la barra lateral .

Soporte del navegador

• (moderno) significa la sintaxis reciente de la especificación (p display: flex;. ej. )
• (híbrido) significa una sintaxis no oficial extraña de 2011 (p display: flexbox;. ej. )
• (antiguo) significa la sintaxis antigua de 2009 (p display: box;. ej. )

Cromo	Safari	Firefox	Ópera	ES DECIR	Androide	iOS
21+ (moderno) 20- (antiguo)	3.1+ (antiguo)	2-21 (antiguo) 22+ (nuevo)	12.1+ (moderno)	10+ (híbrido)	2.1+ (antiguo)	3.2+ (antiguo)

El navegador Blackberry 10+ admite la nueva sintaxis.

Para obtener más información sobre cómo mezclar sintaxis para obtener la mejor compatibilidad con el navegador, consulte este artículo (Trucos CSS) o este artículo (DevOpera).