Um: display: layout flexível
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、
响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear
和vertical-align属性将失效。Dois: os seis atributos do flex
①, flex-direction A direção do arranjo dos elementos no contêiner (o arranjo padrão é horizontal)
1: direção flexível: linha; Organize os elementos da esquerda para a direita ao longo do eixo horizontal
2: direção flexível: coluna; Deixe os elementos serem organizados verticalmente de cima para baixo ao longo do eixo vertical
3: direção flexível: linha reversa; organize os elementos da direita para a esquerda ao longo do eixo horizontal
②, a embalagem de elementos no contêiner flex-wrap (sem embalagem por padrão)
1：flex-wrap: nowrap; (默认)元素不换行,比如：一个div宽度100%，设置此属性后，
2个div宽度就自动变成各50%；
2：flex-wrap: wrap; 元素换行,比如：一个div宽度100%，设置此属性，第二个div就在第二行了；③, a disposição dos elementos de conteúdo justificado no eixo principal (página)
1: justify-content: center; os elementos são organizados no centro no eixo principal (página)
2: justify-content: flex-start; os elementos são organizados da esquerda ou superior no eixo principal (página)
3: justify-content: flex-end; os elementos são organizados da direita ou inferior no eixo principal (página)
4: justify-content: espaço entre; os elementos começam a ser dispostos nas extremidades esquerda e direita ou nas extremidades superior e inferior do eixo principal (página)
5: justify-content: space-around; O espaço em ambos os lados de cada elemento é igual. Portanto, o espaço entre os elementos é duas vezes maior do que o espaço entre os elementos e a borda.
④ O alinhamento do elemento de itens de alinhamento na direção do eixo horizontal (eixo vertical) da linha atual do eixo principal (página)
1: align-items: flex-start; O limite da posição inicial do eixo lateral (eixo vertical) do elemento flex box está próximo ao limite inicial do eixo lateral da linha (alinhado acima).
2: align-items: flex-end; O limite da posição inicial do eixo lateral (eixo vertical) do elemento flexbox está próximo ao limite final do eixo lateral da linha. (Alinhamento inferior)
3: alinhar-itens: centro; O elemento da caixa elástica é colocado no centro no eixo lateral (eixo vertical) da linha. (Alinhado ao centro)
4: itens de alinhamento: linha de base; Se o eixo inline e o eixo lateral do elemento flex box são iguais, este valor é equivalente a 'início flexível'. Em outros casos, este valor participará do alinhamento da linha de base. (Alinhar no topo)
⑤, alinhar o conteúdo alinhar os itens no contêiner quando os elementos no contêiner elástico não ocuparem todo o espaço disponível no eixo transversal (vertical)
<div id="main">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:pink;"></div>
</div>#main {
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: flex-start;
}
#main div {
width: 70px;
height: 70px;
}1: align-content: flex-start; O elemento está localizado no início do contêiner. As linhas são empilhadas em direção à posição inicial do recipiente da caixa elástica.
2: align-content: flex-end; O elemento está localizado no final do contêiner. As linhas são empilhadas em direção ao final do recipiente da caixa elástica.
3: align-content: center; O elemento está localizado no centro do contêiner. As linhas são empilhadas em direção ao meio do recipiente da caixa elástica.
4: align-content: stretch; O valor padrão. Os elementos são esticados para caber no contêiner. As linhas vão se esticar para ocupar o espaço restante. Se o espaço restante for negativo, o valor é equivalente a 'flex-start'.
5: align-content: space-between; O elemento está localizado em um contêiner com um espaço em branco entre as linhas. As linhas são distribuídas uniformemente no recipiente da caixa elástica.
6: align-content: space-around; O elemento está localizado em um contêiner com espaços em branco antes, entre e depois de cada linha. As linhas são distribuídas uniformemente no contêiner flexbox, e metade da distância entre o elemento filho e o elemento filho é reservada em ambas as extremidades. Se o espaço restante for negativo ou houver apenas uma linha no contêiner do flexbox, este valor é equivalente a 'centro'.
⑥ 、
Resumo das propriedades flex comuns
Alinhamento posicional
justify-content: center ;: organizar no centro
justify-content: flex-start; / * organizar a partir do início da linha /
justify-content: flex-end; / organizar a partir do final da linha * /
Autor: Yang Yang 1314
link: https: //www.jianshu.com/p/d9373a86b748/
Fonte: Jane livro
Jane livro copyright reservados pelos autores, são reproduzidos em qualquer forma, entre em contato com o autor para obter autorização e indicar a fonte .