Layout CSS Flex

Layout flexível

O modelo de caixa CSS2 tradicional usa layout de posição flutuante. [Lado do PC]
O modelo de caixa flexível do CSS3 usa layout Flex. [Terminal móvel, Bootstrap responsivo]

Classificação do modelo de caixa

Classificação do modelo de caixa: modelo de caixa de IE, modelo de caixa padrão, diferença essencial: método de cálculo de largura e altura

Termos do layout Flex

1. Flex Container: Flex container.
   Um elemento de nível de bloco com layout flexbox (display: flex;) habilitado é chamado de flex container.
2. Item flexível: item flexível.
   Os elementos de nível de sub-bloco dentro do contêiner Flex.
   (1) Tamanho principal, a largura do item Flex na direção do eixo principal.
   (2) Tamanho cruzado, a altura do item Flex na direção do eixo cruzado.
3. Eixo principal: O eixo principal do contêiner Flex. O eixo principal se refere ao eixo horizontal por padrão.
   (1) Main Start, a posição inicial do fuso.
   (2) Main End, a posição final do fuso.
4. Eixo cruzado: o eixo cruzado do contêiner Flex, também conhecido como "eixo cruzado", o eixo cruzado se refere ao eixo vertical por padrão

(1) Cross Start, a posição inicial do eixo transversal.
(2) Cross End, a posição final do eixo transversal.
Nota: Depois de habilitar a tecnologia Flex, float, clear e vertical-align não estão disponíveis.

Cenas

No desenvolvimento de pequenos programas e terminais móveis, é necessário considerar a adaptação em dispositivos terminais de vários tamanhos.
No desenvolvimento tradicional da web, o modelo de caixa é usado e o layout é realizado por meio da exibição: inline | block | inline-block, position e float, que carece de flexibilidade e alguns efeitos de adaptação são difíceis de alcançar. Por
exemplo, o seguinte comum as listas de informações exigem diferentes alturas de conteúdo. Se você tiver certeza, mantenha-o centralizado verticalmente. Nesse caso, é recomendável usar o layout flexível. Em

um exemplo em que as informações de altura não são fixas, você só precisa definir as duas propriedades a seguir no recipiente para obter centralização vertical sob conteúdo incerto:

display define o
alinhamento horizontal do modelo de caixa justify-
content.container {display: flex; flex-decoration: column; justify-content: center;}

Propriedades de layout flex em CSS3 agindo no Flex Container

A maneira de ativar o layout Flex: display: flex;
(1) Os itens Flex são organizados ao longo do eixo principal por padrão no Flex Container.
(2) O Flex Item não permite quebras de linha no Flex Container por padrão.
Se a largura do Flex Container for menor que a soma das larguras de todos os Flex Items, cada Flex Item irá
dividir a largura do Flex Container uniformemente em proporção à largura original.
(3) O item flexível disposto no eixo principal deve ter uma largura ou crescimento flexível, e a altura pode ser omitida ou a altura
pode ser automática.

Atributos pais comuns

1. direção flexível: Defina a direção do eixo principal.

Valor:
(1) valor padrão da linha, o que significa que a direção do eixo principal é horizontal. [Equivalente a float: left;]
(2) linha reversa, o que significa que a direção do eixo principal é o oposto da direção horizontal. [Equivalente a float: right;]
(3) Coluna, indicando que a direção do eixo principal é a direção vertical, e o eixo principal e o eixo transversal são trocados.
(4) coluna reversa, indicando que a direção do eixo principal é oposta à direção vertical.

2. justify-content: Defina o alinhamento do eixo principal do Flex Item no Flex Container.

Valor:
(1) flex-start, o valor padrão, Flex Item é alinhado ao longo da posição inicial do eixo principal no Flex Container.
(2) extremidade flexível, o item flexível é alinhado ao longo da posição final do eixo principal no recipiente flexível.
(3) centro, o Flex Item é alinhado no centro ao longo do eixo principal no Flex Container.
(4) Espaço entre, os itens flexíveis são distribuídos uniformemente no contêiner Flex e
o intervalo entre todos os itens flexíveis é o mesmo.
(5) Espaço ao redor, os Flex Items são distribuídos uniformemente no Flex Container, e
a distância entre as duas extremidades de todos os Flex Items é a mesma.
(6) Espace uniformemente, a distância entre os itens, a distância entre o primeiro item e o final do eixo principal do primeiro item e o final do eixo principal é igual à distância entre os itens.

3. align-items: define o alinhamento do eixo cruzado do Flex Item no Flex Container.

Valor:
(1) flex-start, Flex Item é alinhado ao longo da posição inicial do eixo cruzado no Flex Container.
(2) extremidade flexível, o item flexível é alinhado ao longo da posição final do eixo cruzado no recipiente flexível.
(3) centro, o Flex Item é alinhado no centro ao longo do eixo cruzado no Flex Container.
(4) esticar, o valor padrão, Flex Item estica e alinha no Flex Container.
Quando Flex Item não especifica height ou height: auto, a altura do Flex Item é a mesma que Flex Container
.
(5) Linha de base, cada item flexível é alinhado em relação à linha de base.
A. Se não houver conteúdo de texto dentro do Flex Item, o Flex Item está na parte superior do Flex Container
e a parte inferior de cada Flex Item é alinhada.
B. Se o Flex Item tem conteúdo de texto dentro, cada Flex Item é alinhado em relação à linha de base do texto

4. flex-wrap: Defina se deseja permitir que o item flexível seja exibido no recipiente flexível.

Valor: (1) nowrap, o valor padrão, nenhum avanço de linha é permitido.
(2) Wrap, permitindo quebras de linha quando a largura do Flex Container é menor que a soma de cada Flex Item.
(3) warp-reverse, permitindo quebra de linha e layout reverso na direção vertical.

5. align-content: Defina o alinhamento do Flex Item em relação ao eixo transversal no caso de vários fusos.

Como obter o efeito multi-fuso: (1) A largura do Flex Container é menor do que a soma das larguras de todos os Flex Items.
(2) Permitir quebras de linha.
Valor: (1) flex-start, múltiplos fusos são alinhados à posição inicial do eixo transversal na direção do eixo transversal.
(2) Extremidade flexível, vários fusos são alinhados à posição final do eixo transversal na direção do eixo transversal.
(3) centro, geralmente alinhado com o centro do fuso na direção do eixo transversal.
(4) alongamento, o valor padrão, alinhamento de alongamento.
(5) Espaço entre, o espaçamento entre vários fusos é consistente.
(6) Espaço ao redor, a distância entre os dois lados de cada fuso é a mesma.
(7) Espaçar uniformemente, o espaçamento entre as linhas e a distância entre a primeira linha e o ponto final do eixo cruzado e a linha final da linha final são iguais.
align-content é semelhante a align-items e também é mais fácil se confundir.
Em primeiro lugar, deixe claro: o align-content irá alinhar várias linhas como um todo, e o contêiner deve permitir a quebra de linha.
Comparado:

Diferença:
em termos de valores de atributo, align-content tem dois valores a mais do que align-items: space-between e space-around

6. Atributos compostos

atributo flex-flow (atributo composto agindo no Flex Container):
equivalente a uma coleção de direção e quebra
flex-flow: row nowrap; / * valor padrão, organizado em ordem sem quebra de linha /
flex-flow: row-reverse wrap; / Organize na ordem inversa e agrupe automaticamente * /

Propriedades de layout flexível em CSS3 agindo no item flexível (subitens)

1, atributos flex

Defina o espaço restante alocado pelo subitem e use o flex para indicar a quantidade de cópias,
podendo ser expresso em números ou porcentagens.

flex:  <number>; // flex 的值是数字
flex:1;

2. flex-basis: Defina o tamanho principal ocupado pelo item flexível. Alternativa de propriedade de largura do item

Valor:
(1) Valor numérico com unidade.
(2) Porcentagem.
A. Se o Flex Container permitir quebra de linha, 100% ocupará toda a largura do Flex Container.
B. Se o Flex Container não permitir quebras de linha, 100% ocupará a largura restante do Flex Container.
(3) auto, o valor padrão, o tamanho do espaço do fuso ocupado pelo Flex Item está sujeito à propriedade de largura. Se o
atributo de largura não for definido , o valor é inválido.
Se largura e base flexível existirem ao mesmo tempo e seus valores entrarem em conflito, o item Flex terá base flexível como padrão.

propriedades flex-basis: •
Quando o contêiner define flex-direction para row ou row-reverse, flex-basis e width existem ao mesmo tempo, e flex-basis tem uma prioridade mais alta do que largura, ou seja, flex-basis substitui o propriedade de largura neste momento.
•
Quando o contêiner define direção flexível para coluna ou reverso de coluna, base flexível e altura existem ao mesmo tempo, e base flexível tem uma prioridade mais alta do que altura, ou seja, base flexível substitui o atributo de altura neste momento .
• Deve-se notar que quando um de base flexível e largura (ou altura) é automático, não automático tem uma prioridade mais alta.

3. Ordem: Defina a ordem de exibição dos Flex Items no Flex Container (ordem de organização ao longo do eixo principal).

Valor:
(1) 0, organizado de acordo com a ordem de escrita do código do Flex Item no Flex Container.
(2) Os inteiros sem unidades são organizados em ordem crescente dos inteiros.

4. Alinhe-se, defina o alinhamento do item flexível específico em relação ao próprio eixo transversal.
Valor:
(1) auto, o valor padrão, o alinhamento do eixo cruzado é realizado de acordo com o atributo definido por align-items. Quando o contêiner não define o align-item, o valor do atributo é stretch.
(2) flex-start
(3) flex-end
(4) center
(5) linha de base
(6) stretch
5. flex-grow: Defina a taxa de ampliação do Flex Item no Flex Container (o fator de expansão do item) .

Valor:
(1) 0, o valor padrão, quando o Flex Container tem espaço livre, o Flex Item não tem efeito de zoom.
(2) Um número inteiro sem uma unidade, que representa a proporção
de ampliação do Flex Item quando o Flex Container tem espaço livre .
Fator de expansão flex-grow:
• Cenário: grow English significa <expandir, expandir, aumentar>, o que significa que quando a largura do elemento pai é maior do que a soma das larguras dos elementos filho, e o elemento pai tem excedente, então flex-grow está bom Faça o elemento filho expandir e compartilhar o espaço do elemento pai.
• Valor: O valor padrão de flex-grow é 0, o que significa que o elemento não reivindica o espaço restante do elemento pai.Se o valor for maior que 0, significa reivindicar.

6. Flex-Encolher: Defina a taxa de encolhimento do Flex Item no Flex Container (o fator de encolhimento do item).
Valor:
(1) 1, o valor padrão, o que significa que se o espaço for insuficiente, o Flex Item encolherá.
(2) 0 significa que se o espaço for insuficiente, o item flexível também não encolherá.
Funções de redução flexível:
• Quando o item transborda na direção do eixo principal, o item pode ser comprimido para caber no contêiner, definindo o fator de redução do item. O valor do atributo é o fator de redução do item e o valor do atributo é um número não negativo.
• Quando a redução flexível não está definida, o valor padrão da redução flexível é 1.

** 7. Atributos compostos **

atributos flex (atributos compostos atuando no Flex Item, simplesmente entendê-lo):
Modos abreviados de flex-grow, flex-shrink e flex-basis
Valor:
(1) nenhum, equivalente a 0 0 auto;
(2) auto, equivalente a 1 1 auto; modelo
clássico de dados de caixa

<div class="demo">
			<div class="box box1">
				<div class="dot"></div></div>
			<div class="box box2">
				<div class="dot"></div>
			</div>
			<div class="box box3">
				<div class="dot"></div>
			</div>
			<div class="box box4">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="box box5">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="box box6">
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
			</div>
			<div class="box box7">
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
			
			<div class="box box8">
				<div class="dot"></div>
			</div>
			<div class="box box9">
				<div class="dot"></div>
			</div>
			<div class="box box10">
				<div class="dot"></div>
			</div>
			<div class="box box11">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="box box12">
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
			<div class="box box13">
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
			<div class="box box14">
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
			
			<div class="box box15">
				<div class="dot"></div>
			</div>
			<div class="box box16">
				<div class="dot"></div>
			</div>
			<div class="box box17">
				<div class="dot"></div>
			</div>
			<div class="box box18">
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot1"></div></div>
			</div>
			<div class="box box19">
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot1"></div></div>
			</div>
			<div class="box box20">
				<div class="row"><div class="dot"></div></div>
				<div class="row"><div class="dot"></div></div>
			</div>
			<div class="box box21">
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
				</div>
				<div class="row">
					<div class="dot"></div>
					<div class="dot"></div>
					<div class="dot"></div>
				</div>
			</div>
		</div>

.demo{
    
    
	width: 920px;
	height: 400px;
	border: 1px solid gray;
	display: flex;
	flex-wrap: wrap;
}
.box{
    
    
	width: 120px;
	height: 120px;
	border-radius: 10px;
	background: rgba(0,0,0,0.7);
	display: flex;
	margin: 5px;
}
.dot{
    
    
	width: 30px;
	height: 30px;
	background: #F5F5F5;
	border-radius: 50%;
}
.dot1{
    
    
	width: 30px;
	height: 30px;
	background: transparent;
	border-radius: 50%;
}

.box2{
    
    
	flex-direction: row;
	justify-content: center;
}
.box3{
    
    
	justify-content: flex-end;
}
.box4{
    
    
	justify-content: space-between;
}
.box5{
    
    
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
}
.box6{
    
    
	flex-wrap: wrap;
	align-content: space-between;
}
.box6 .row{
    
    
	width: 100%;
	display: flex;
}
.box6 .row:nth-of-type(2){
    
    
	justify-content: center;
}
.box6 .row:nth-of-type(3){
    
    
	justify-content: flex-end;
}
.box7{
    
    
	flex-wrap: wrap;
	align-content: space-between;
}
.box7 .row{
    
    
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.box7 .row:nth-of-type(2){
    
    
	justify-content: center;
}


.box8{
    
    
	flex-direction: column;
	justify-content: center;
}
.box9{
    
    
	justify-content: center;
	align-items: center;
}
.box10{
    
    
	justify-content: flex-end;
	align-items: center;
}
.box11{
    
    
	flex-direction: column;
	justify-content: space-between;
}
.box12{
    
    
	justify-content: space-between;
	align-items: flex-end;
}
.box13{
    
    
	justify-content: space-between;
}
.box13 .row{
    
    
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.box14{
    
    
	justify-content: space-between;
}
.box14 .row{
    
    
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


.box15{
    
    
	flex-direction: column;
	justify-content: flex-end;
}
.box16{
    
    
	align-items: flex-end;
	justify-content: center;
}
.box17{
    
    
	align-items: flex-end;
	justify-content: flex-end;
}
.box18,.box19{
    
    
	flex-wrap: wrap;
	align-content: space-between;
}
.box18 .row,.box19 .row{
    
    
	width: 100%;
	display: flex;
}
.box18 .row:nth-of-type(2){
    
    
	justify-content: center;
}
.box19 .row:nth-of-type(2){
    
    
	justify-content: flex-end;
}
.box20{
    
    
	flex-wrap: wrap;
	align-content: space-between;
}
.box20 .row{
    
    
	width: 100%;
	display: flex;
}
.box20 .row:nth-of-type(2){
    
    
	justify-content: flex-end;
}
.box21{
    
    
	flex-wrap: wrap;
	align-content: space-between;
}
.box21 .row{
    
    
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.box21 .row:nth-of-type(2){
    
    
	justify-content: center;
}

Ligeiramente excluído e modificado
————————————————
Este artigo é o artigo original do blogueiro CSDN "web_zsh"
Link original: https://blog.csdn.net/web_only_/article/ detalhes / 100707608