[Frontend] Layout do modelo de caixa elástica CSS-Flex

I. Introdução

  CSS Flexbox (Flexbox) é um modelo de layout poderoso e flexível que simplifica nosso controle sobre o layout das páginas da web e torna as páginas mais adaptáveis ​​em diferentes dispositivos. Este artigo apresentará os conceitos básicos, propriedades e métodos de uso de caixas flexíveis CSS para ajudá-lo a compreender melhor o layout das caixas flexíveis.

2. Qual é o layout flexível

Flex é a abreviatura de Caixa Flexível, que significa “layout elástico”, que é utilizado para proporcionar máxima flexibilidade ao modelo de caixa.

1. Qualquer contêiner pode ser especificado como um layout Flex

.box{
	display: flex;
}

2. Elementos embutidos também podem usar layout Flex

.box{
	display: inline-flex;
}

3. Navegadores com kernel Webkit devem ser prefixados com -webkit

.box{
	display: -webkit-flex;
	display: flex;
}

Nota: Após definir o layout Flex, os atributos float, clear e vertical-align dos elementos filhos serão inválidos

3. Conceitos básicos

Os elementos que adotam um layout Flex são chamados de contêiner Flex (contêiner flexível) ou "contêiner", abreviadamente. Todos os seus elementos filhos tornam-se automaticamente membros do contêiner e tornam-se itens flexíveis (flex item), chamados de "itens".

O contêiner possui dois eixos por padrão: o eixo principal horizontal (eixo principal) e o eixo transversal vertical (cruzar asix). A posição inicial do eixo principal (a interseção com o quadro) é chamada de início principal e a posição final é chamada de fim principal ; a posição inicial do eixo transversal é chamada de início cruzado e a posição final é chamada de fim cruzado

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 de tamanho principal , e o espaço do eixo cruzado ocupado por um único item é chamado de tamanho cruzado

Quatro, duas propriedades comumente usadas de flex

Em relação às propriedades comumente usadas do flex, podemos dividi-las em propriedades de contêiner e propriedades de projeto

1. Propriedades do contêiner

• direção flexível
• envoltório flexível
• fluxo flexível
• justificar-conteúdo
• alinhar itens
• alinhar conteúdo

2. Propriedades do projeto

• ordem
• crescimento flexível
• flexível-encolhível
• base flexível
• flexionar
• alinhar-se

5. Propriedades do contêiner

1、direção flexível

① Definição

Determina a direção do eixo principal (ou seja, a direção na qual os itens são organizados)

②, declaração

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

1), valor do atributo

• linha (valor padrão): o eixo principal é horizontal e o ponto inicial está na extremidade esquerda
• linha reversa: o eixo principal é horizontal e o ponto inicial está na extremidade direita
• coluna: o eixo principal é vertical e o ponto inicial está na borda superior
• coluna reversa: o eixo principal é vertical e o ponto inicial está na parte inferior

③, exemplo de código

1）、direção flexível: linha

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  flex-direction: row;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  margin: 10px;
}

2）、direção flexível: linha inversa

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  flex-direction: row-reverse;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  margin: 10px;
}

3）、direção flexível: coluna

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  flex-direction: column;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  margin: 10px;
}

4）、flex-direção: coluna reversa

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.container {
  display: flex;
  flex-direction: column-reverse;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  margin: 10px;
}

2、envoltório flexível

① Definição

Os elementos elásticos são sempre dispostos ao longo do eixo principal, portanto, se o eixo principal não puder ser organizado, use flex-wrap para determinar se os itens no contêiner podem ser embrulhados

②, declaração

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

1), valor do atributo

• nowrap (padrão): não embrulhar
• wrap: a primeira linha está abaixo
• wrap-reverse: nova linha, primeira linha acima

O padrão não é quebrar a linha, mas o elemento não poderá remover o contêiner diretamente, o que envolverá a expansão e contração elástica do elemento

③, exemplo de código

1）、flex-wrap:nowrap

<div class="content1">
   <div class="red">1</div>
   <div class="green">2</div>
   <div class="blue">3</div>
</div>

.content1 {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    width: 897px;
    text-align: center;
}

.content1 div {
     height: 50%;
     width: 300px;
}

.content1 {
    display: flex;
    flex-wrap: nowrap;
}

2）、flex-wrap:envoltório

<div class="content">
   <div class="red">1</div>
   <div class="green">2</div>
   <div class="blue">3</div>
</div>

.content {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    width: 897px;
    text-align: center;
}

.content div {
     height: 50%;
     width: 300px;
}

.content {
    display: flex;
    flex-wrap: wrap;
}

3）、flex-wrap:wrap-reverse

<div class="content2">
   <div class="red">1</div>
   <div class="green">2</div>
   <div class="blue">3</div>
</div>

.content2 {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    width: 897px;
    text-align: center;
}

.content2 div {
     height: 50%;
     width: 300px;
}

.content2 {
    display: flex;
    flex-wrap: wrap-reverse;
}

3、fluxo flexível

① Definição

É uma forma abreviada de atributo flex-direction e atributo flex-wrap, e o valor padrão é row nowrap

②, declaração

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

③, exemplo de código

element {
  flex-flow: column-reverse wrap;
}

4、justificar conteúdo

① Definição

Define o alinhamento dos itens no eixo principal

②, declaração

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

1), valor do atributo

• flex-start (padrão): alinhado à esquerda
• extremidade flexível: alinhamento à direita
• centro: centrado
• espaçamento entre: Justifique ambas as extremidades, e o espaçamento entre os itens é igual
• space-around: dois itens estão igualmente espaçados em ambos os lados

③, exemplo de código

1）、justificar conteúdo: início flexível

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    .container {
       display: flex;
       justify-content: flex-start;
     }

     .item {
       width: 100px;
       height: 100px;
       background-color: #e18181;
       margin: 10px;
    }

2）、justificar conteúdo: extremidade flexível

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    .container {
       display: flex;
       justify-content: flex-end;
     }

     .item {
       width: 100px;
       height: 100px;
       background-color: #e18181;
       margin: 10px;
    }

3）、justificar conteúdo: centro

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    .container {
       display: flex;
       justify-content: center;
     }

     .item {
       width: 100px;
       height: 100px;
       background-color: #e18181;
       margin: 10px;
    }

4）、justificar conteúdo: espaço entre

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    .container {
      display: flex;
      justify-content: space-between;
    }

     .item {
       width: 100px;
       height: 100px;
       background-color: #e18181;
       margin: 10px;
    }

5)、justificar-conteúdo：espaço ao redor

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    .container {
     display: flex;
     justify-content: space-around;
   }

     .item {
       width: 100px;
       height: 100px;
       background-color: #e18181;
       margin: 10px;
    }

5、alinhar itens

① Definição

Define como os itens são alinhados no eixo cruzado

②, declaração

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

1), valor do atributo

• flex-start: O ponto inicial do eixo cruzado está alinhado
• flex-end: Alinha o final do eixo transversal
• centro: Alinhe o ponto médio do eixo transversal
• linha de base: o alinhamento da linha de base da primeira linha de texto no item
• stretch (valor padrão): Se o item não tiver altura definida ou estiver configurado como automático, ele será coberto com a altura de todo o container
  

6、alinhar conteúdo

① Definição

Define o alinhamento de vários eixos. Esta propriedade não tem efeito se o item tiver apenas um eixo

②, declaração

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

1), valor do atributo

• flex-start: alinha com o ponto inicial do eixo transversal
• flex-end: alinha com o final do eixo transversal
• centro: alinha com o ponto médio do eixo transversal
• espaço entre: Alinhado com ambas as extremidades do eixo transversal, o intervalo entre os eixos é distribuído uniformemente
• space-around: O espaçamento em ambos os lados de cada eixo é igual. Portanto, a distância entre os eixos é duas vezes maior que a distância entre os eixos e o quadro
• esticar (padrão): o eixo preenche todo o eixo transversal
  

6. Propriedades do projeto

1º pedido

① Definição

Define a ordem de classificação dos itens. Quanto menor o valor, maior o arranjo, o padrão é 0

②, declaração

.item {
    order: <integer>;
}

2、crescimento flexível

① Definição

  Como mencionado acima, quando o contêiner está definido como flex-wrap: nowrap; quando a linha não está quebrada e a largura do contêiner não é suficiente, o elemento elástico determinará a taxa de ampliação do item definido de acordo com flex-grow (como esticar quando a largura do contêiner > a largura total do elemento). O padrão é 0, ou seja, se houver espaço restante, não aumente o zoom

②, declaração

.item {
    flex-grow: <number>;
}

1), valor do atributo

• 0 (padrão): não aumenta o zoom se houver espaço restante
• Se todos os itens tiverem uma propriedade flex-grow igual a 1, eles dividirão igualmente o espaço restante (se houver)
• Se a propriedade flex-grow de um item for 2 e os demais itens forem 1, o espaço restante ocupado pelo primeiro será o dobro do dos demais itens

Nota: A largura do contêiner flexível é exatamente igual à soma das larguras dos elementos e não há excesso de largura. Neste momento, não importa qual seja o valor de flex-grow, ele não terá efeito

3、flexível-encolhível

① Definição

Define a taxa de redução do item (como encolher quando a largura do container < a largura total do elemento), o padrão é 1, ou seja, se não houver espaço suficiente, o item irá encolher

②, declaração

.item {
    flex-shrink: <number>; /* default 1 */
}

Se a propriedade flex-shrink de todos os itens for 1, quando o espaço for insuficiente, eles serão reduzidos proporcionalmente Se a propriedade flex-shrink de um item for 0 e os outros itens forem 1, o primeiro não diminuirá no contêiner largura
quando não há espaço suficiente

4、base flexível

① Definição

O que é definido é o tamanho inicial do elemento no eixo principal. O chamado tamanho inicial é o tamanho do elemento antes de flex-grow e flex-shrink entrarem em vigor. O navegador calcula se há espaço extra no eixo
principal de acordo com este atributo. O valor padrão é auto, que é o tamanho original do item, se a largura for definida, o tamanho do elemento é determinado pela largura/altura (a direção do eixo principal), se não for definido, é determinado pelo conteúdo

②, declaração

.item {
   flex-basis: <length> | auto; /* default auto */
}

Quando definido como 0, ele se expandirá de acordo com o conteúdo.
Pode ser definido com o mesmo valor do atributo de largura ou altura (como 350px), e o item ocupará um espaço fixo

5.flexível

① Definição

O atributo flex é uma abreviação de flex-grow, flex-shrink e flex-basis. O valor padrão é 0 1 auto, que também é um atributo complexo e difícil de entender.

②, declaração

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

1), valor do atributo

• flexível: 1 = flexível: 1 1 0%
• flexível: 2 = flexível: 2 1 0%
• flex: automático = flex: 1 1 automático
• flex: none = flex: 0 0 auto, frequentemente usado para tamanho fixo sem alongamento

A diferença entre flex:1 e flex:auto pode ser atribuída à diferença entre flex-basis:0 e flex-basis:auto
Quando definido como 0 (elemento elástico absoluto), isso é equivalente a dizer flex-grow e flex-shrink em Não preciso considerar meu tamanho ao esticar.
Quando definido como automático (em relação aos elementos elásticos), você precisa levar em consideração o tamanho do elemento ao esticar.
Observação: é recomendado usar este atributo primeiro em vez de escrever três atributos separados separadamente. porque o navegador inferirá o valor relevante

6、alinhar-se

① Definição

Permite que um único item tenha um alinhamento diferente de outros itens e pode substituir o atributo de alinhamento de itens. O
valor padrão é automático, o que significa herdar o atributo de alinhamento de itens do elemento pai. Se não houver nenhum elemento pai, é equivalente a esticar

②, declaração

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

7. Cenários de aplicação do layout do modelo Flexbox

   O layout do modelo de caixa elástica Flexbox pode ser aplicado a quase todos os cenários que exigem layout e disposição de elementos, especialmente muito importante em design responsivo. Aqui estão alguns cenários de aplicação:

1. Centralizar elementos verticalmente e horizontalmente
2. Crie um layout de grade
3. Crie um layout adaptável
4. Gerencie a alocação e alinhamento de espaço
5. Crie um layout escalonado
6. Crie layouts de várias colunas
7. Adapte-se a diferentes tamanhos de tela e dispositivos

  Concluindo, o layout do modelo Flexbox é um método de layout muito flexível que pode ser usado tanto para necessidades de layout simples quanto complexas. Também pode ser usado com outras propriedades CSS, como layout de grade e técnicas de design responsivo, o que o torna muito útil no desenvolvimento web.

8. Vantagens do layout do modelo Flexbox

1. Simplifique o layout

Usar o layout de caixa flexível pode simplificar bastante nosso controle do layout da página da web e reduzir o uso de atributos como posicionamento e flutuação

2. Design responsivo

O layout flexível da caixa é altamente adaptável e pode ajustar automaticamente o layout de acordo com diferentes dispositivos e tamanhos de tela para obter um design responsivo

3. Forte flexibilidade

O layout de caixa flexível tem escalabilidade muito flexível, pode se adaptar a vários requisitos de arranjo e alinhamento e fornece melhor controle de layout

Nove. Resumo

  O surgimento do layout elástico Flex é para atender às demandas de mercado cada vez mais ricas e complexas de interfaces e funções de software. Seu principal apelo é que o tamanho dos elementos filhos deve ser capaz de responder dinamicamente às mudanças no tamanho dos elementos pais e manter certas estruturas características.

1. Princípio de implementação

Em termos de princípios de implementação, para atender métodos de layout flexíveis e mutáveis, o layout flexível introduz um conjunto de conceitos muito importantes:

• Eixo principal (eixo principal): A direção na qual o item flexível se estende determina a posição de organização do próximo item flexível;
• Eixo cruzado: A direção perpendicular ao eixo principal determina os detalhes específicos do comportamento do eixo principal quando ele encontra uma situação de nova linha.

2. Etapas de trabalho de layout

Para contêineres flexíveis, todo o trabalho de layout pode ser dividido em três etapas:

• Passo 1: Todos os itens flexíveis são divididos em linhas de acordo com seu próprio tamanho e o tamanho do eixo principal. Simplificando, quando o espaço do eixo principal não pode acomodar itens flexíveis, a ramificação é executada;
• Passo 2: De acordo com as informações da filial obtidas na etapa anterior e as características dos itens flexíveis de cada linha, calcule o tamanho do eixo principal e as informações de layout de todos os itens flexíveis desta linha;
• Etapa 3: Calcule as informações de tamanho e layout de todos os itens flexíveis no eixo cruzado por meio dos três atributos de alinhamento-conteúdo, alinhamento de itens e alinhamento-self.

  Em geral, o surgimento do layout flexível possibilita layouts de páginas web ricos e diversificados. Por um lado, libera a criatividade dos engenheiros e, por outro lado, atende às demandas do mercado com requisitos cada vez mais complexos.