Flex é a abreviatura de caixa flexível, que é traduzida como "layout flexível". É usado para fornecer o máximo de flexibilidade para o modelo de caixa. Qualquer contêiner pode ser designado como um layout flexível. ; elementos inline podem ser definidos por "display:inline-flex" é implementado, deve-se notar que se o layout flexível for definido, os atributos float, clear e vertical-align dos elementos filhos serão inválidos.
1. Conceitos básicos
O layout flexível é um modelo de layout, geralmente chamado de flexbox. Depois de usar o layout flexível, ele fornecerá recursos poderosos de alocação de espaço e alinhamento para elementos filhos.
Antes de usar o layout flexível, os layouts comumente usados incluem: layout fluido, layout flutuante, layout de posicionamento, etc. A desvantagem é que o elemento filho precisa controlar sua posição no elemento pai e também prestar atenção ao colapso da altura do elemento pai.
A vantagem do flex é evitar formulários de layout inflexíveis, criar mais modos de layout para você escolher e resolver problemas como alinhamento, distribuição e capacidade de resposta de subelementos. A desvantagem é que ele só pode contar com seu próprio modo de layout e não pode ser alterado se houver uma ligeira alteração.
Os elementos que usam layout flexível são chamados de contêineres flexíveis ou, abreviadamente, "contêineres". Todos os seus elementos filhos geram automaticamente membros do contêiner, chamados de itens flexíveis (itens flexíveis), chamados de "itens";
O contêiner possui dois eixos principais por padrão: o eixo principal horizontal (eixo principal) e o eixo transversal vertical (eixo transversal). A posição inicial do eixo principal (ou seja, a interseção das bordas) é 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.
As seguintes propriedades são fornecidas em CSS para implementar o layout Flex:
De acordo com diferentes escopos, essas propriedades podem ser divididas em duas categorias: propriedades do contêiner (direção flexível, envoltório flexível, fluxo flexível, justificar conteúdo, alinhar itens, alinhar conteúdo) e propriedades do item (pedir, alinhar -self , flex, flex-grow, flex-shrink, flex-basis). Vamos apresentar o uso desses atributos.
2. Propriedades do contêiner
(1) flex-direction : Especifique a direção da disposição dos subelementos na caixa flexível;
Os valores opcionais para o atributo são os seguintes:
A propriedade flex-direction determina a direção do eixo principal (ou seja, a direção da disposição dos itens);
.box {direção flexível: linha | linha reversa | coluna | coluna reversa;}Este atributo tem 4 valores
● 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;
●reverso da coluna: O eixo principal é vertical e o ponto inicial está na borda inferior;
O efeito acima é mostrado na figura abaixo:
(2) flex-wrap : Especifique o método de empacotamento dos subelementos na caixa flexível;
Por padrão, os itens são organizados em uma linha (também chamada de "eixo"). O atributo flex-wrap define como quebrar a linha se um eixo não puder ser organizado.
.box{flex-wrap:nowrap|wrap|wrap-reverse}● nowrap (padrão): sem quebra de linha, o efeito de arranjo é o seguinte:
●wrap: wrap, a primeira linha está no topo, o efeito de arranjo é o seguinte:
●wrap-reverse: wrap, a primeira linha fica na parte inferior, o efeito de arranjo é o seguinte:
(3) flex-flow : esta propriedade atua no contêiner da caixa flexível e é usada para controlar a direção do arranjo e quebra de linha dos elementos no contêiner. Esta propriedade é uma propriedade composta que consiste em flex-direction e flex-wrap;
.box{flex-flow:<flex-direction><flex-wrap>;}(4) justificar-conteúdo : Este atributo atua sobre os subelementos no contêiner de caixa flexível e é usado para controlar a distribuição dos próprios subelementos na direção do arranjo;
A propriedade justificar-content define o alinhamento do item no eixo principal
.box{justify-content:flex-start|flex-end|center|space-between|space-around;}Este atributo possui 5 valores:
● flex-start (valor padrão): alinhado à esquerda;
●flex-end: alinhado à direita;
●centro: centrado;
●espaço entre: Alinhe ambas as extremidades e os intervalos entre os itens sejam iguais;
●space-around: O espaçamento em ambos os lados de cada item é igual, portanto o espaçamento entre os itens é duas vezes maior que o espaçamento entre o item e a borda;
O efeito acima é mostrado na figura abaixo:
(5) alinhar itens : Este atributo atua no contêiner da caixa flexível e é usado para controlar o alinhamento de todos os subelementos na caixa flexível na direção vertical da direção do arranjo;
A propriedade align-item define como os itens são alinhados no eixo cruzado
.box{align-items:flex-start|flex-end|center|baseline|stretch;}Este atributo possui 5 valores. O alinhamento específico está relacionado à direção do eixo transversal. Supõe-se que o eixo transversal seja de cima para baixo:
●flex-start: alinha o ponto inicial do eixo transversal;
●flex-end: alinha o ponto médio do eixo transversal;
●centro: alinha o ponto médio do eixo transversal;
●linha de base: alinhamento da linha de base da primeira linha do texto do item;
●stretch (valor padrão): Se o item não tiver altura definida ou estiver definido como automático, ele ocupará toda a altura do container;
O efeito acima é mostrado na figura abaixo:
3. Propriedades do projeto
(1) atributo de pedido
O atributo order é usado para definir a ordem em que os itens aparecem no contêiner. Você pode definir a posição do item no contêiner por meio de valores específicos.
número do pedido;
Onde número é a posição do item no contêiner e o valor padrão é 0.
Exemplo:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;margin-top:10px;}.flexdiv{largura:60px;altura:60px;margem inferior:5px; border:1pxsolidblack;}.flexdiv:nth-child(1){ordem:3;}.flexdiv:nth-child(2){ordem:1;}.flexdiv:nth-child(3){ordem:2;} .flexdiv:nth-child(4){ordem:5;}.flexdiv:nth-child(5){ordem:4;</style></head><body><div><div>A</div ><div>B</div><div>C</div><div>D</div><div>E</div></div></body></html>Resultados em execução:
(2) atributo de alinhamento próprio
O atributo align-s elf permite definir um alinhamento diferente para um item em relação a outros itens. Este atributo pode substituir o valor do atributo align-items. Os valores opcionais para o atributo align-self são os seguintes:
Exemplo:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;height:150px;}.flexdiv{largura: 60px;altura:60px;border:1pxsolidblack;}.flexdiv:nth-child(3){align-self:flex-start;}</style></head><body><div><div>A</ div><div>B</div><div>C</div><div>D</div><div>E</div></div></body></html>Resultados em execução:
(3) atributo flexível
O atributo flex é a abreviatura dos três atributos flex-grow, flex-shrink e flex-basis. O formato da sintaxe é o seguinte:
flex:flex-growflex-shrinkflex-base;
A descrição do parâmetro é a seguinte:
● flex-grow: (parâmetro obrigatório) um número usado para definir o valor de crescimento do item em relação a outros itens, o valor padrão é 0;
●flex-shrink: (parâmetro opcional) um número usado para definir a redução de um item em relação a outros itens. O valor padrão é 1;
●flex-basis: (parâmetro opcional) O comprimento do item, os valores legais são auto (valor padrão, indicando automático), herdar (indicando a herança do valor deste atributo do elemento pai) ou adicionar %, px, em , etc. para um valor específico A forma da unidade.
Além disso, o atributo flex possui dois valores de atalho, a saber, auto (1 1 auto) e none (0 0 auto).
O código de exemplo é o seguinte:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;}.flexdiv{largura:60px;altura: 60px;border:1pxsolidblack;}.flexdiv:nth-child(2){flex:0;}.flexdiv:nth-child(4){flex:11auto;}</style></head><body><div ><div>A</div><div>B</div><div>C</div><div>D</div><div>E</div></div></body>< /html>Resultados em execução:
