diseño flexible

1. ¿Qué es el diseño Flex?

Flex es la abreviatura de Flexible Box, que significa "diseño flexible" y se utiliza para proporcionar la máxima flexibilidad al modelo de caja.

¿Cualquier contenedor puede designarse como diseño Flex (? También se pueden utilizar elementos en línea)

2. Conceptos básicos

Un elemento que utiliza el diseño Flex se denomina contenedor Flex. Todos sus elementos secundarios se convierten automáticamente en miembros del contenedor, llamados proyectos Flex.

p>

3. Atributos del contenedor (puntos clave para recordar)

Los siguientes 6 atributos se establecen en el contenedor.

3.1 El atributo flex-direction determina la dirección del eje principal (es decir, la dirección de disposición de los elementos)

flex-direction:row | row-reverse | ;

1) fila: dispuesta horizontalmente de izquierda a derecha (alineada a la izquierda), el método de disposición predeterminado.

2) fila-inversa: invierte la disposición horizontal (alineada a la derecha, de atrás hacia adelante, con el último elemento al frente.

3) columna: disposición vertical

p> p>

4) column-reverse: invierte la disposición vertical, de atrás hacia adelante, con el último elemento arriba.

flex-wrap define cómo envolver si un eje no encaja

flex-wrap: nowrap |? wrap-reverse

1) ¿nowrap (predeterminado) no se ajusta?

2) se ajusta, ¿la primera línea está en la parte superior?

3) se ajusta-reverse: se ajusta, la primera línea está debajo

3.2 .flex-flow es la abreviatura de la propiedad flex-direction y la propiedad flex-wrap. El valor predeterminado es fila nowrap?

justify-content define la alineación del elemento en. el eje principal

justify-content: flex-start | flex-end | space0-between | space-around

align-items define cómo se alinean los elementos en el eje transversal.

align-item: flex-start? |? flex-end |? center? |? baseline |? align-content define la alineación de múltiples ejes. Si el proyecto tiene un solo eje, esta propiedad no tiene ningún efecto