Diseño flexible y los seis atributos de flex

Familiarizado con la Flexnecesidad de comprender Flexlos siguientes 6dos CSSatributos:

/* 设置 Flex 模式 */
display: flex;

/* 决定元素是横排还是竖着排，要不要倒序 */
flex-direction: column;

/* 决定元素换行格式，一行排不下的时候如何排 */
flex-wrap: wrap;

/* flex-flow = flex-direction + flex-wrap */
flex-flow: column wrap;

/* 同一排下对齐方式，空格如何隔开各个元素 */
justify-content: space-between;

/* 同一排下元素如何对齐，顶部对齐、中部对齐还是其他 */
align-items: center;

/* 多行对齐方式 */
align-content: space-between;

A continuación analizamos en detalle la situación de estos elementos:

Conocimiento Point 1 . flex-direction: Determinar la dirección del husillo

• row - Dirección horizontal (predeterminada), el punto de partida está en el extremo izquierdo
• row-reverse -Dirección horizontal, el punto de partida está en el extremo derecho
• column -Dirección vertical, el punto de partida está en el borde superior
• column-reverse -Dirección vertical, el punto de partida está en el borde inferior

display: flex;

flex-direction: row | row-reverse | column | column-reverse;

Punto de conocimiento 2 . flex-wrap: Cuando uno de los ejes (fila) la fila no menos de cómo resolver

• nowrap - (predeterminado) sin salto de línea
• wrap -Ruptura de línea, primera línea arriba
• wrap-reverse -Nueva línea, primera línea debajo

display: flex;

flex-wrap: nowrap | wrap | wrap-reverse;  

. El conocimiento 3 . flex-flow: = Flujo-Flex Flex Flex + -dirección-wrap. Es decir, flex-flow es una colección de estas dos propiedades

• row nowrap - (Por defecto) dirección horizontal, punto de inicio en el extremo izquierdo, sin salto de línea

display: flex;

flex-flow: <flex-direction> || <flex-wrap>;

Referencia detallada 1y2

El conocimiento del punto 4 . justify-content: Definir el proyecto sobre la alineación de husillos

• flex-start -Alinear a la izquierda
• flex-end -Alinear a la derecha
• center -Centro de alineación
• space-between -Alinear ambos extremos con un espacio en el medio
• space-around -Espacio circundante

display: flex;

justify-content: flex-start | flex-end | center | space-between | space-around;

Punto 5 del conocimiento . align-items: ¿Cómo alinear la definición del proyecto en la intersección del eje

• flex-start -Alinear en la parte superior, es decir, la parte superior del texto y las imágenes están en la misma línea
• flex-end -Alinear la parte inferior, es decir, la parte inferior del texto, imagen, etc.están en la misma línea
• center -El medio está alineado, es decir, no importa lo alto que esté la imagen del texto, pon el medio en la misma línea
• stretch -Llena la altura de todo el contenedor con texto e imágenes, y fuerza la uniformidad
• baseline -Alinear la primera línea de cada elemento en la misma línea

display: flex;

align-items: flex-start | flex-end | center | stretch | baseline;

6 conocimiento . align-content: Alineación define una pluralidad de ejes. Si solo hay un eje (solo una línea), este atributo no tiene ningún efecto

• flex-start -Estas líneas están alineadas en la parte superior
• flex-end -Estas líneas están alineadas en la parte inferior
• center -Estas líneas están alineadas en el centro
• stretch -Ampliar o ampliar estas líneas para llenar la altura del contenedor
• space-between -Utilice espacios para rellenar el medio de estas líneas
• space-around -Rellena los lados y el medio de estas líneas

display: flex;

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

• Este documento es una cita de Yu Dieyou - Liang señor también es su propia experiencia de aprendizaje + suplemento de documento
• Dirección de Liang sirGit: https://github.com/LiangJunrong/document-library