CSS relacionado, layout flexível é all-pass!

Layout de origem de busca de raiz

Tudo começa com a pergunta: como obter centralização horizontal e vertical ao mesmo tempo com CSS de maneira simples e elegante.

Lembre-se do início de aprender CSS, consulte a floatpropriedade não poderia deixar de sentir brilha, lógico pensar deixou um layout de documento do Word usado em alinhado, alinhado à direita e centrado.

No entanto, logo desapontado para encontrar CSS não existe na float: centerescrita, então text-align: center, verticle-align: centerse é viável? A resposta é não.

Esses dois atributos podem ser usados apenas para elementos embutidos e não são válidos para o layout do elemento no nível do bloco.

Idade não entrou no layout da página de layout CSS por quase tableelementos implementados na tableunidade pode facilmente usar Gerry align, valignpara atingir o alinhamento horizontal e vertical, com a prevalência de Web semântica, que gradualmente esquecido pela redacção .

padrão CSS fornece-nos com três tipos de layout de: 标准文档流, 浮动布局e 定位布局. A combinação desses métodos pode resolver facilmente as necessidades comuns das páginas do lado do PC. Por exemplo, a centralização horizontal pode ser usada margin: 0 autoe a centralização horizontal e vertical pode ser definida da seguinte maneira:

.dad { 
    posição : relativa ; 
} 
.son { 
    posição : absoluta ; 
    margem : auto ; 
    topo : 0 ; 
    direita : 0 ; 
    inferior : 0 ; 
    esquerda : 0 ; 
}

.dad { 
    posição : relativa ; 
} 
.son { 
    width : 100px ; 
    altura : 100px ; 
    posição : absoluta ; 
    topo : 50% ; 
    esquerda : 50% ; 
    margem superior : -50px ; 
    margem esquerda : -50px ; 
}

Esses métodos de escrita têm alguns defeitos: falta de semântica e não são suficientemente flexíveis.

O que precisamos é alcançar a distribuição centralizada ou uniforme de elementos filho por meio de um atributo e até mesmo nos adaptarmos automaticamente ao zoom da janela.

Sob essa demanda, nasceu o quarto método de layout do CSS: este é o layout flexível em que vamos nos concentrar hoje.

Conceitos básicos de flex

Para usar o layout flexível, primeiro defina o contêiner pai display: flexe, em seguida, defina para justify-content: center obter a centralização horizontal e, finalmente, defina para align-items: center obter a centralização vertical.

#dad { 
    display : flex ; 
    justificar conteúdo : centro ; 
    align-items : center
 }

É simples assim, e pronto.

Começamos justify-content com align-items dois conceitos básicos.

Foi muito difícil, o conceito é o núcleo do cabo flexível recipiente e eixos .

recipiente exterior compreende um contentor principal e o interior do recipiente secundário , o eixo compreende um eixo principal e um eixo transversal , pode-se dizer que todas as características da disposição do cabo flexível são construídos em dois conceitos.

O layout flexível envolve 12 atributos CSS (não incluídos display: flex), incluindo 6 contêineres pai e 6 filhos. No entanto, existem apenas quatro atributos comumente usados, dois para o contêiner pai e dois para o contêiner filho.Vamos começar pelos atributos mais usados.

1. contêiner

O contêiner possui essas características: o contêiner pai pode definir de maneira uniforme a organização do contêiner filho e o contêiner filho também pode definir sua própria organização, se ambos forem definidos ao mesmo tempo, prevalecerá a configuração do contêiner filho.

1.1 Container pai

Defina os subcontêineres a serem dispostos ao longo do eixo principal: justificar conteúdo

justify-content O atributo é usado para definir como organizar os sub-contêineres ao longo do eixo principal.

Defina como os sub-contêineres são organizados ao longo do eixo transversal: align-items

align-items O atributo é usado para definir como distribuir o espaçamento do subcontêiner ao longo do eixo transversal.

linha de base: alinhamento da linha de base. A linha de base aqui se refere à primeira linha do texto, por padrão, ou seja, a primeira linha de base. Todos os subcontêineres estão alinhados à linha de base. O subcontêiner com a maior distância desde o início do eixo transversal até a linha de base do elemento será tangente ao início do eixo transversal para determinar a linha de base.

esticar: o tamanho do contêiner filho ao longo da direção do eixo transversal é esticado para ser consistente com o contêiner pai.

1.2 Recipiente filho

Como esticar o eixo: flex

Sub recipiente é um flexível (isto é, a elasticidade de flex), eles serão automaticamente preencher o espaço restante do recipiente pela razão de estiramento da sub- flexdeterminado atributo.

flexO valor pode ser o número adimensional (tais como: 1, 2, 3), pode haver um único dígito (por exemplo: 15 pixels, 30px, 60 pixels), pode também ser nonea palavra-chave.

De acordo com o sub-tanque irá flexautomaticamente retráctil proporção de tamanho definido, se o valor for nonenão retráctil.

Embora flexuma pluralidade de propriedade abreviatura para permitir 1-3 em conjunção valores, mas normalmente para satisfazer as necessidades, com um valor que pode ser escrita com referência a toda a FIG.

Defina separadamente como os sub-recipientes são organizados ao longo do eixo transversal: alinhar-se

Cada contêiner filho também pode ser definido individualmente para ser organizado ao longo do eixo transversal.O valor opcional dessa propriedade é align-items exatamente o mesmo que o contêiner pai . Se os dois forem configurados ao mesmo tempo, a align-self propriedade do contêiner filho prevalecerá.

2. Eixo

Como mostrado, o veio compreende uma fuso e um eixo transversal , sabemos que o justify-contentatributo determinação arranjo ao longo do eixo principal da sub-tanque.

align-items Os atributos determinam a organização dos contêineres filhos ao longo do eixo transversal.

Então, como é determinado o próprio eixo? No layout flexível, o flex-directionatributo determina a direção do eixo principal e a direção do eixo transversal é determinada pelo eixo principal.

Fuso

A extremidade inicial do eixo é flex-start indicada por e o segmento final é flex-end indicado por . As posições dos segmentos inicial e final correspondentes a diferentes direções do fuso também são diferentes.

Eixo transversal

O fuso horário é rodado 90 ° para dar o eixo transversal, do eixo de intersecção e a extremidade inicial também o final do parágrafo flex-starte flex-endFig.

Os vários atributos descritos acima são as partes mais usadas do layout flexível.De um modo geral, elas podem atender à maioria das necessidades.Se você implementar um layout complexo, precisará saber mais sobre os atributos.

conceito avançado flex

Defina o modo de quebra de linha: flex-wrap

Determina se os sub-contêineres são agrupados em linhas, não apenas podem ser agrupados sequencialmente, mas também podem ser revertidos.

As quebras de linha na ordem inversa referem-se às quebras de linha na direção oposta do eixo transversal.

Configuração combinada de alimentação axial e de linha: fluxo flexível

flow é a direção do fluxo, ou seja, a direção na qual o subcontêiner flui e se a quebra de linha pode fluir para o ponto final.Por exemplo flex-flow: row wrap, flex-flowé um atributo composto, que é equivalente à combinação de direção flexível e flex-wrap. Os valores opcionais são os seguintes:
- row, columnEtc., a direção do eixo pode ser definida separadamente
- wrap, nowrapEtc., o método de avanço de linha pode ser definido separadamente
- row nowrap, column wrapEtc., ou ambos
Alinhar várias linhas ao longo do eixo transversal: alinhar conteúdo

Quando os subcontêineres estiverem organizados em várias linhas, defina o alinhamento entre as linhas.

2. Recipiente para crianças

Defina o tamanho da base: base flexível

flex-basis Representa o tamanho original do subcontêiner sem escala. Quando o eixo principal é horizontal, representa a largura e, quando o eixo principal é vertical, representa a altura.

Defina a taxa de expansão: flex-grow

A proporção de sub-recipientes que se esticam elasticamente. Conforme mostrado na figura, o espaço restante é alocado para os sub-contêineres na proporção de 1: 2.

Definir proporção de contração: flex-contração

A proporção de contração elástica do sub-recipiente. Conforme mostrado na figura, o excesso é subtraído do contêiner filho na proporção de 1: 2.

Defina a ordem de classificação: order

Altere a ordem de organização dos subcontêineres para substituir a ordem no código HTML.O valor padrão é 0, que pode ser um valor negativo. Quanto menor o valor, maior a disposição.

A seguir, estão todos os atributos do layout flexível.Há 12 no total e 6 em cada um dos contêineres pai e filho, que podem ser revisados a qualquer momento através da figura a seguir.