Layout flexível e os seis atributos do flex

Familiarizado com a Flexnecessidade de compreender Flexos seguintes 6dois 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 seguir, analisamos a situação desses elementos em detalhes:

Ponto conhecimento 1 . flex-direction: Determinar a direção do eixo

• row - Direção horizontal (padrão), o ponto de partida está na extremidade esquerda
• row-reverse - Direção horizontal, o ponto de partida está na extremidade direita
• column - Direção vertical, o ponto inicial está na borda superior
• column-reverse - Direção vertical, o ponto inicial está na borda inferior

display: flex;

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

Ponto conhecimento 2 . flex-wrapQuando um eixo (linha) remar nada menos do que a forma de resolver

• nowrap - (Padrão) sem quebra de linha
• wrap - Quebra de linha, primeira linha acima
• wrap-reverse -Nova linha, primeira linha abaixo

display: flex;

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

Conhecimento 3. . flex-flow: = Flow-Flex Flex Flex + -Direção-wrap. Ou seja, flex-flow é uma coleção dessas duas propriedades

• row nowrap - Direção horizontal (padrão), ponto inicial na extremidade esquerda, sem quebra de linha

display: flex;

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

Referência detalhada 1e2

Ponto conhecimento 4 . justify-content: Definir o projeto sobre o alinhamento do eixo

• flex-start -Alinhar à esquerda
• flex-end - Alinhar à direita
• center - Alinhamento central
• space-between - Alinhe ambas as extremidades com um espaço no meio
• space-around -Espaço ao redor

display: flex;

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

Ponto conhecimento 5 . align-items: Como alinhar a definição do projeto na intersecção do eixo

• flex-start -Alinhe na parte superior, ou seja, a parte superior do texto e as imagens estão na mesma linha
• flex-end - Alinhe a parte inferior, ou seja, a parte inferior do texto, imagem, etc. estão na mesma linha
• center - O meio fica alinhado, ou seja, não importa a altura da imagem do texto, coloque o meio deles na mesma linha
• stretch - Preencher a altura de todo o contêiner com texto e imagens e forçar a uniformidade
• baseline - Alinha a primeira linha de cada item na mesma linha

display: flex;

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

6 conhecimento . align-content: Alinhamento define uma pluralidade de eixos. Se houver apenas um eixo (apenas uma linha), este atributo não tem efeito

• flex-start -Estas linhas estão alinhadas no topo
• flex-end -Estas linhas estão alinhadas na parte inferior
• center -Estas linhas estão alinhadas no centro
• stretch - Expanda ou amplie essas linhas para preencher a altura do contêiner
• space-between -Use espaços para preencher no meio dessas linhas
• space-around -Preencher as laterais e o meio dessas linhas

display: flex;

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

• Este documento é citado por Yu Dieyou - Liang senhor também é sua própria experiência de aprendizado + suplemento do documento
• Liang sirGit address: https://github.com/LiangJunrong/document-library