Layout elegante da caixa flexível flexível

Introdução ao Flex

Antes do layout flexível, queríamos fazer um layout elegante de duas ou três colunas para a página. Era muito trabalhoso usar a flutuação ou o posicionamento para isso. Agora podemos usar a caixa flexível flexível de maneira rápida e fácil para alcançar

• Flex é a abreviatura de Flexible Box, que significa "layout flexível" e é usado para fornecer o máximo de flexibilidade para modelos de caixa. Os elementos no nível do bloco usam display: flex; os elementos inline usam inline-flex e, depois que o contêiner usa o layout Flex, os atributos float, clear e verticle-align dos elementos filhos serão inválidos

Conceitos Básicos

• A configuração do elemento atual exibe: flex; ou inline-flex, a caixa é chamada de flex container container, conhecido como " container "
• Todos os elementos filho do elemento atual tornam-se automaticamente membros do contêiner e tornam-se flex items, chamados de " itens ".
• O contêiner é dividido em dois eixos por padrão: o eixo principal horizontal e o eixo cruzado vertical. A posição inicial do eixo principal (a intersecção com o quadro) é chamada main starte a posição final é chamada main end; a posição inicial da cruz eixo é chamado cross starte a posição final é chamada cross end. Os itens são organizados ao longo do eixo principal por padrão. O espaço do eixo principal ocupado por um único item é chamado main sizee o espaço do eixo cruzado ocupado é chamado cross size.

6 atributos usados ​​no projeto

• flex-grow: zoom in ratio
• flex-encolher: reduz a proporção
• base flexível: valor base flexível
• flex: abreviação de flex-grow, flex-shrink e flex-basis
• ordem: ordem de classificação
• alinhar-se: alinhamento de item único

1. flex-grow

Defina a taxa de ampliação do flex-item no eixo principal, o valor padrão é 0: mesmo se houver espaço restante (largura), ele não será ampliado.

• Alocar o espaço restante da caixa de acordo com a proporção definida
• Expansão: O valor padrão do layout das colunas esquerda e direita é O;
• Se o valor do atributo flex-grow de todos os flex-items for 1, significa que eles dividem igualmente o espaço restante (se houver)

2. flex-encolher

Defina a taxa de redução do flex-item no eixo principal. O valor padrão é 1, ou seja, se o espaço for insuficiente, o flex-item encolherá.

• Assim que a proporção de encolhimento do elemento definido ultrapassar a parte da caixa, corte o tamanho correspondente de acordo com o tamanho da proporção, ou seja, quanto maior a proporção, maior o corte, o valor padrão é 1;
• Se o valor do atributo flex-shrink de todos os flex-items for 1, quando o espaço for insuficiente, ele será reduzido proporcionalmente
• O item flexível com encolhimento flexível de 0 não encolherá quando o espaço for insuficiente.

3. base flexível

Valor de referência de flexibilidade. O item ocupa o espaço do eixo principal. O valor padrão é automático, que significa o tamanho original do item flexível.

• O navegador calcula se há espaço extra com base neste atributo
• Se os valores de largura e altura forem fixados como unidades de comprimento absoluto (como 350px), o flex-item ocupará um espaço fixo

4. flex

É uma abreviação para as três propriedades de flex-grow, flex-shrink e flex-basis, o valor padrão é 0 1 auto

• Dois valores de atalho: nenhum significa (0 0 automático); automático significa (1 1 automático)
• Recomenda-se usar os valores dos atributos primeiro, em vez de escrever três atributos separados primeiro (o navegador calculará automaticamente os valores relevantes)

5. ordem

Os atributos definem a ordem dos itens. Quanto menor for o valor, maior será a disposição e o padrão é 0.

6. alinhar-se

Permitir que um único item flexível e outro item flexível tenham um alinhamento diferente no eixo cruzado, o que pode substituir o valor de itens de alinhamento

• alinhar-itens: auto | flex-start | flex-end | centro | linha de base | strecth
• O valor padrão é auto: indica que o atributo align-items do elemento pai é herdado
• linha de base alinhada de acordo com a linha de base
• Equivalente a esticar sem elemento pai

Defina 6 atributos no contêiner 12241.25

• flex-direction determina a direção do eixo principal
• flex-wrap se deve embrulhar
• Abreviação de flex-flow flex-direction e flex-wrap
• Alinhamento de itens de conteúdo justificado no eixo principal
• alinhamento de itens de alinhamento no eixo transversal
• align-content O alinhamento de vários eixos

1. direção flexível

Determine a direção do eixo principal, ou seja, a direção da disposição dos itens

• direção flexível: linha | linha reversa | coluna | coluna reversa
• linha (valor padrão) O eixo principal é horizontal e o ponto inicial está na extremidade esquerda
• O eixo principal de inversão de linha é horizontal e o ponto inicial está na extremidade direita
• coluna O eixo principal está na direção vertical e o ponto de partida está na extremidade superior
• coluna reversa O eixo principal está na direção vertical, e o ponto de partida está na extremidade inferior

2. envoltório flexível

Por padrão, os itens são organizados em uma linha (também conhecida como "eixo"), definida pelo atributo flex-wrap, se um eixo não estiver alinhado, como quebrar

• flex-wrap ： nowrap | embrulhar | envoltório reverso
• nowrap (padrão): sem
  quebra de linha * quebra: mudar travar, a primeira linha está no topo
• wrap-reverse: wrap, a primeira linha está abaixo

3. flex-flow

Abreviação de flex-direction e flex-wrap, o valor padrão é row nowrap

flex-flow: &&

4. justificar o conteúdo

O atributo define o alinhamento do item no eixo principal.

.box {
    
    
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start (padrão): justificado à esquerda
• flex-end: alinhar à direita
• centro: centrado
• espaço entre: justificado em ambas as extremidades, o espaço entre os itens é igual.
• Espaço ao redor: O espaço em ambos os lados de cada item é igual. Portanto, o intervalo entre os itens é duas vezes maior do que o intervalo entre os itens e a borda.

5. alinhar itens

Os atributos definem como os itens são alinhados no eixo cruzado.

.box {
    
    
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start: alinha o ponto inicial do eixo transversal.
• flex-end: alinhe os pontos finais do eixo transversal.
• center: O ponto central do eixo cruzado é alinhado.
• linha de base: o alinhamento da linha de base da primeira linha do texto do projeto.
• esticar (padrão): Se o projeto não tiver uma altura definida ou definida como automática, ele ocupará a altura de todo o container.

6. alinhar o conteúdo

Define o alinhamento de várias linhas de eixo. Se o projeto tiver apenas uma linha principal, este atributo não tem efeito

• align-content: flex-start | flex-end | centro | espaço entre | espaço ao redor | esticar
• esticar (padrão): o eixo é coberto por todo o eixo transversal
• espaço entre: alinhe com ambas as extremidades do eixo cruzado, e o espaço entre os eixos é distribuído uniformemente
• espaço ao redor: o espaço em ambos os lados de cada eixo é igual
• flex-start: alinhe com o ponto inicial do eixo cruzado

flexione horizontalmente e verticalmente centrado:

.container{
    
    
            margin: 30px;
            height: 100%;
            width:100%;
            background: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        p{
    
    
           
            background: red;
        }

Ponto de conhecimento essencial: CSS é centrado, você não se lembra disso?