CSS Flex: un tutorial interactivo

Puedes seguirme en Twitter para obtener tutoriales, consejos de JavaScript, etc.

Si desea experimentar con usted mismo, vaya al creador de diseños flexibles en vivo ahora para crear sus propios diseños flexibles.

He revisado casi todos los tutoriales Flex existentes desde froggy hasta la documentación oficial del W3C. Pero hay una cosa que nunca aprenderá sobre Flex sin un ejemplo interactivo: el comportamiento de las propiedades cuando cambia el tamaño de un * elemento individual. Puedes ver lo que quiero decir a continuación.

Consulte el Diccionario visual CSS con todas las propiedades CSS explicadas visualmente.

Creé esta nueva herramienta Flex de la noche a la mañana y la mejoré en el transcurso de los próximos días. ¡El resto de este tutorial proporcionará algunas ideas sobre lo que descubrí mientras jugaba con él!

Lo que aprendí sobre Flex al diseñar el generador Flex

Hay algunas peculiaridades interesantes sobre flex que no siempre son obvias al principio. Por ejemplo, los artículos estrechos no se estiran y se comportan como un inicio flexible, incluso si se aplica el estiramiento. A continuación te guiaré por el resto de ellos.

Aquí están los ejemplos visuales completos

¡Sigue leyendo si quieres consumir este tutorial visualmente!

Mostraré todos los casos posibles y hablaré brevemente sobre las peculiaridades de Flex que descubrí que es posible que desee conocer (o, en algún momento, tropezaré).

inicio flexible

El valor de inicio flexible es el predeterminado. Realmente no hay mucho aquí aparte de que se parece mucho al flotador que se está volviendo obsoleto lentamente: izquierda:

inicio flexible

extremo flexible

El valor del extremo flexible se comporta de manera similar a float: right; Aquí hay dos artículos:

extremo flexible

centrar

¿Recuerdas cuando escribiste instintivamente float: center, pero te decepcionó el hecho de que no pasó nada en el navegador? Flex al rescate. El valor central actúa como cabría esperar:

centro flexible

espacio entre

El espacio entre, espacio alrededor (siguiente) y el espacio de manera uniforme parecen producir resultados similares, al principio. Pero intente cambiar la cantidad de elementos. Entonces resulta obvio que las tres opciones de diseño tienen propiedades únicas.

espacio entre

espacio alrededor

espacio alrededor

espacio uniformemente

espacio uniformemente

Y finalmente…

tramo

El valor del estiramiento es un poco peculiar. Solo estira los artículos si son lo suficientemente grandes. Lo que quiero decir con "lo suficientemente grande" suele ser al menos el 100% del contenedor. Intenta hacerlos más pequeños. Verá que los elementos comienzan a flotar nuevamente hacia la izquierda, como con el inicio flexible, aunque no esté presente:

espacio uniformemente

Finalmente, también hay una versión separada del editor flex. Contiene solo una fila, pero además, tiene botones para reducir y expandir.

Porque a veces reducir el ancho cambia todo. Los elementos pueden comenzar a comportarse mucho como estiramiento, a pesar de que no está configurado. Pero eso es natural trabajar con Flex. Solo algo a tener en cuenta:

El creador de diseño de Flex interactivo se diseñó específicamente para ayudar a aprender el comportamiento de flex en diferentes condiciones cuando el tamaño de cada elemento individual se cambia en tiempo real. Puede probar la demostración en vivo en mi sitio. Para comenzar a crear sus propios diseños flexibles, vaya al creador de diseños flexibles en vivo ahora. (Otras herramientas CSS también están allí).

Del mismo modo, este generador Flex le ayuda a aprender el comportamiento de los diseños flexibles al cambiar de forma interactiva la propiedad de justificar el contenido, modificar el número de elementos y arrastrar y soltar (reducir o estirar) el ancho de cada elemento individual.

Oferta por tiempo limitado

¡Los diagramas en este tutorial fueron influenciados directamente por el manuscrito!

CSS Visual Dictionary 28% de descuento para lectores medianos.

28% de descuento

Solo lectores medianos:

Diccionario visual CSS

== agarrar una copia ==

Contiene todas las propiedades CSS