Resumo da explicação detalhada do layout flexível do modelo de caixa flexível

Capítulo 16: Modelo de caixa flexível de layout flexível

Prefácio
1. Modelo de caixa flexível
- 1. Ative (use) elasticidade e modelos
- 2. A disposição padrão do modelo flexbox
2. Algumas propriedades do pai do modelo de caixa flexível
3. Alguns atributos dos filhos do modelo caixa flexível
4. Resumo dos métodos para centralizar elementos no nível pai
Resumir

Prefácio

O layout da página que aprendemos anteriormente depende principalmente do tipo de elemento (nível de bloco, inline, bloco inline), posicionamento, flutuação, etc. combinado com margem para organizar a página. Às vezes é necessário calcular a largura e a altura dos elementos. Usar o layout do modelo de caixa flexível pode efetivamente evitar esses problemas.

1. Modelo de caixa flexível

O layout do modelo flex box pode fornecer uma maneira mais eficiente de organizar, alinhar e alocar espaço vazio para subelementos em um contêiner. É um método de layout que garante que os elementos tenham comportamento adequado quando a página precisar se adaptar a diferentes tamanhos de tela e tipos de dispositivos. O objetivo da introdução do modelo de layout de caixa flexível é

1. Ative (use) elasticidade e modelos

No estilo pai , adicione: display: flex;ou display: inline-flex;. Seus elementos filhos podem ser dispostos de acordo com as regras do modelo de caixa flexível.
Insira a descrição da imagem aqui

2. A disposição padrão do modelo flexbox

Por padrão, eles são organizados horizontalmente da esquerda para a direita, sem quebras de linha;
Nota: Quando a soma das larguras dos filhos exceder a largura dos pais, a largura de cada filho será dimensionada igualmente. Altamente não afetado

<style>
        .wrap{
      
      
            /* 父级开启弹性盒模型 */
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
        }
        .wrap div{
      
      
            width: 350px;
            height: 350px;
            border: 1px solid rebeccapurple;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</body>

Renderização:
Insira a descrição da imagem aqui

2. Algumas propriedades do pai do modelo de caixa flexível

Esses atributos devem ser escritos no estilo pai para terem efeito no filho

1.flex-wrap controla o empacotamento de subelementos

flex-wrapO atributo determina se o item será quebrado quando o eixo principal do elemento filho não puder ser colocado. O padrão é não quebrar.

none, valor padrão, sem quebra de linha; (não pode ser colocado e dimensionado proporcionalmente)
wrap, quebra de linha, primeira linha na frente;
wrap-reverse, quebra de linha, última linha primeiro.

Insira a descrição da imagem aqui

2.flex-direction controla a direção do arranjo dos elementos filhos

Os elementos filhos são organizados horizontalmente ao longo do eixo principal

row, valor padrão, organizado horizontalmente da esquerda para a direita;

row-reverse, dispostos horizontalmente da direita para a esquerda;

Os elementos filhos são organizados verticalmente ao longo do eixo lateral

column, dispostos verticalmente de cima para baixo;

column-reverse, dispostos verticalmente de baixo para cima.

método de escrita composta flex-flow

flex-flowAtributo é uma abreviatura de flex-directione flex-wrap.
O valor padrão é flex-flow: row none;.

Insira a descrição da imagem aqui

3.justify-content controla o alinhamento dos elementos filhos no eixo principal

justify-contentA propriedade define o alinhamento dos elementos filhos ao longo do eixo principal (direção horizontal).

flex-start, o valor padrão, o ponto inicial está alinhado, ou seja, alinhado à esquerda;

flex-end, alinhamento do ponto final, ou seja, alinhamento à direita;

center, alinhe horizontalmente e centralize

space-between, ambas as extremidades estão alinhadas e o espaço intermediário é distribuído uniformemente;

space-around, todos os intervalos são distribuídos igualmente e os intervalos adjacentes são sobrepostos.

space-evenly, todos os intervalos são distribuídos uniformemente

Insira a descrição da imagem aqui

4. alinhar itens controla o alinhamento dos elementos filhos no eixo secundário

align-itemsA propriedade define o alinhamento dos elementos filhos no eixo secundário (direção vertical).

flex-start, alinhe o ponto inicial do eixo secundário, ou seja, alinhe de cima para baixo;

flex-end, alinhe o ponto final do eixo secundário, ou seja, alinhe de baixo para cima;

center, alinhamento centralizado verticalmente;

baseline, alinhamento da linha de base do texto

stretch, o valor padrão, se o elemento filho não definir altura (largura), ele ocupará todo o container. (Se todos os elementos filhos tiverem um valor de altura definido, o comportamento será flex-starto mesmo.)

Insira a descrição da imagem aqui

5. align-content controla o alinhamento entre linhas de subelementos

align-contentA propriedade define o alinhamento entre vários eixos principais ( ou seja, entre linhas após o encapsulamento ). Portanto, se o elemento filho não for quebrado, esta propriedade não terá efeito.

flex-start, alinhe o ponto inicial do eixo secundário;
flex-end, alinhe o ponto final do eixo secundário;
center, o eixo secundário está centralizado;
space-between, ambas as extremidades do eixo secundário estão alinhadas e distribuídas uniformemente no meio;
space-around, o espaçamento entre cada linha será distribuído uniformemente e os espaços adjacentes serão sobrepostos;
space-evenly, todos os intervalos são distribuídos uniformemente
strecth, o valor padrão, se o elemento filho não definir uma altura, ele ocupará o eixo principal correspondente. (Entre os 5 valores restantes, se a altura não for definida, a altura do elemento filho = a altura mais alta da linha + espaçamento entre linhas)

3. Alguns atributos dos filhos do modelo caixa flexível

Essas propriedades são escritas no próprio filho e você mesmo pode defini-las (desde que haja uma propriedade flex no pai).

O
orderatributo order define a ordem de exibição dos elementos filhos (visualmente). O valor é um número. Quanto menor o número, maior a prioridade.
O
flex-growatributo flex-grow é usado para especificar a proporção de alocação de elementos filhos quando há espaço restante no eixo principal. O padrão é 0, o que significa que não há aumento.
O
flex-shrinkatributo flex-shrink é usado para especificar a proporção de distribuição da redução dos elementos filhos quando o espaço do eixo principal é insuficiente. O padrão é 1, ou seja, a redução é distribuída uniformemente.
A propriedade flex-basis
flex-basisdefine a quantidade de espaço do eixo principal ocupado pelos elementos filhos antes de alocar o espaço. O valor padrão autoé o tamanho original do elemento.
O
flexatributo flex é flex-grow flex-shrink flex-basisa abreviatura de e o valor padrão é o valor padrão desses três flex: 0 1 auto;. Pelo menos um valor precisa ser escrito e os dois últimos valores são omitidos.
flexExistem dois valores especiais, autoequivalentes a 1 1 auto, noneequivalentes a 0 0 auto.
Recomenda-se usar este atributo primeiro em vez de escrever três atributos de decomposição separados, porque o navegador calculará automaticamente os valores relevantes.
O
align-selfatributo align-self permite que os elementos filhos especifiquem seu próprio alinhamento. Este atributo é herdado do pai por padrão align-itemse pode ser modificado para align-selfobter alinhamentos diferentes para cada elemento filho. Seus valores de atributos são os mesmos align-items.

4. Resumo dos métodos para centralizar elementos no nível pai

Use a margem externa diretamente
Método de posicionamento: Clique aqui para ir para o ponto 4 do Capítulo 11
Frigideira
layout flexível
display: flex;
justify-content: center;
align-items: center;

Resumir

O texto acima é uma explicação relativamente detalhada dos vários arranjos do layout do modelo flex box compilado pelo editor para todos, combinado com casos relevantes. Quais são os atributos do pai e quais são os atributos do filho? É uma explicação mais abrangente resumo; finalmente, combinado com o anterior O conhecimento aprendido resume 4 maneiras de centralizar os elementos filho no pai. Ele foi compilado com referência a diversas fontes e ao meu próprio entendimento. Caso haja imprecisões e omissões, espero que vocês possam me esclarecer e fazer correções. Gostaria de agradecer antecipadamente.