Aplicação prática do FlexBox. Método de posicionamento de elemento Flexbox O que são flexões css

07.12.2023 -

Olá, habr!

Uma bela noite, sem prenunciar nada de interessante, nosso chat recebeu uma proposta do autor de uma publicação que escreveu na primavera de 2012, para escrever um artigo remake, mas usando FlexBox e uma explicação sobre o que e como funciona. Depois de algumas dúvidas, o interesse em entender mais profundamente a especificação ainda ganhou e felizmente sentei-me para digitar esses mesmos exemplos. À medida que mergulhamos nessa área, muitas nuances começaram a ficar claras, o que se transformou em algo mais do que apenas redesenhar os layouts. Em geral, neste artigo quero falar sobre uma especificação tão maravilhosa chamada “CSS Flexible Box Layout Module” e mostrar alguns de seus recursos interessantes e exemplos de aplicação. Convido todos os interessados a participar do hack.

O que gostaria de chamar a atenção é que para criar um layout no FlexBox o desenvolvedor precisará de algum grau de adaptação. Pelo meu próprio exemplo, senti que muitos anos de experiência eram uma brincadeira cruel. O FlexBox requer uma maneira um pouco diferente de pensar sobre o alinhamento de elementos em um fluxo.

Parte técnica

Antes de passar para qualquer exemplo, vale a pena entender quais propriedades estão incluídas nesta especificação e como elas funcionam. Pois alguns deles não são muito claros inicialmente, e alguns estão rodeados de mitos que nada têm a ver com a realidade.

Então. Existem dois tipos principais de elementos no FlexBox: Flex Container e seus filhos - Flex Items. Para inicializar o container, basta atribuir, via css, ao elemento exibição: flexível; ou exibição: inline-flex;. A diferença entre flex e inline-flex está apenas no princípio de interação com os elementos que circundam o container, semelhante a display: block; e display: inline-block;, respectivamente.

Dois eixos são criados dentro de um contêiner flexível, o eixo principal e o eixo perpendicular ou transversal. A maioria dos elementos flexíveis são alinhados ao longo do eixo principal e depois ao longo do eixo transversal. Por padrão, o eixo principal é horizontal e direcionado da esquerda para a direita, e o eixo transversal é vertical e direcionado de cima para baixo.

A direção dos eixos pode ser controlada usando uma propriedade css direção flexível. Esta propriedade assume vários valores:
linha(padrão): O eixo principal do flex container tem a mesma orientação que o eixo embutido do modo de direção da linha atual. O início (início principal) e o fim (fim principal) da direção do eixo principal correspondem ao início (início inline) e final (fim inline) do eixo inline.
linha reversa: Tudo é igual à linha, apenas início principal e fim principal são trocados.
coluna: igual à linha, só que agora o eixo principal é direcionado de cima para baixo.
coluna reversa: igual ao reverso de linha, apenas o eixo principal é direcionado de baixo para cima.
Você pode ver como isso funciona no exemplo do jsfiddle.

Por padrão, todos os itens flexíveis em um contêiner são colocados em uma linha; mesmo que não caibam no contêiner, eles se estendem além de seus limites. Este comportamento é alternado usando a propriedade envoltório flexível. Esta propriedade possui três estados:
agorarap(padrão): Os itens flexíveis são alinhados em uma única linha da esquerda para a direita.
enrolar: os elementos flexíveis são construídos em modo multilinha, a transferência é realizada na direção do eixo transversal, de cima para baixo.
wrap-reverso: o mesmo que wrap, mas envolve de baixo para cima.
Vejamos um exemplo.

Por conveniência, existe uma propriedade adicional fluxo flexível, no qual você pode especificar simultaneamente direção flexível E envoltório flexível. Se parece com isso: fluxo flexível:

Os elementos em um contêiner podem ser alinhados usando a propriedade justificar-conteúdo ao longo do eixo principal. Esta propriedade aceita até cinco valores diferentes.
início flexível(padrão): Os elementos flexíveis são alinhados à origem do eixo principal.
extremidade flexível: os elementos são alinhados ao final do eixo principal
Centro: Os elementos são alinhados ao centro do eixo principal
espaço entre: os elementos ocupam toda a largura disponível no contêiner, os elementos mais externos são pressionados firmemente contra as bordas do contêiner e o espaço livre é distribuído uniformemente entre os elementos.
espaço ao redor: os elementos flexíveis são alinhados para que o espaço livre seja distribuído uniformemente entre os elementos. Mas é importante notar que o espaço entre a borda do container e os elementos externos será a metade do espaço entre os elementos no meio da linha.
Claro, você pode clicar em um exemplo de como essa propriedade funciona.

Isso não é tudo, também temos a capacidade de alinhar elementos ao longo do eixo transversal. Ao aplicar a propriedade alinhar itens, que também assume cinco valores diferentes, você pode obter um comportamento interessante. Esta propriedade permite alinhar elementos em uma linha em relação uns aos outros.
início flexível: todos os elementos são empurrados para o início da linha
extremidade flexível: os elementos são empurrados para o final da linha
Centro: os elementos são alinhados ao centro da linha
linha de base: os elementos são alinhados à linha de base do texto
esticar(padrão): os elementos são esticados para preencher a linha inteira.

Outra propriedade semelhante à anterior é alinhar conteúdo. É o único responsável por alinhar linhas inteiras em relação ao flex container. Não terá efeito se os itens flexíveis ocuparem uma linha. A propriedade assume seis valores diferentes.
início flexível: todas as linhas são pressionadas no início do eixo transversal
extremidade flexível: todas as linhas são pressionadas no final do eixo transversal
Centro: Todas as linhas de embalagem estão alinhadas ao centro do eixo cruzado
espaço entre: as linhas são distribuídas da borda superior para a inferior, deixando espaço livre entre as linhas, enquanto as linhas mais externas são pressionadas contra as bordas do contêiner.
espaço ao redor: As linhas são distribuídas uniformemente por todo o contêiner.
esticar(padrão): as linhas são esticadas para ocupar todo o espaço disponível.
Você pode tentar como os itens de alinhamento e o conteúdo de alinhamento funcionam neste exemplo. Apresentei especificamente essas duas propriedades em um exemplo, uma vez que elas interagem de maneira bastante estreita, cada uma executando sua própria tarefa. Observe o que acontece quando os elementos são colocados em uma linha ou em múltiplas linhas.

Resolvemos os parâmetros de um contêiner flexível, resta apenas descobrir as propriedades dos elementos flexíveis.
A primeira propriedade que conheceremos é ordem. Esta propriedade permite alterar a posição de um elemento específico no fluxo. Por padrão, todos os itens flexíveis têm ordem: 0; e são construídos na ordem do fluxo natural. No exemplo você pode ver como os elementos são trocados se diferentes valores de ordem forem aplicados a eles.

Uma das principais propriedades é base flexível. Com esta propriedade podemos especificar a largura base de um elemento flexível. o valor padrão é auto. Esta propriedade está intimamente relacionada com crescimento flexível E flexível-encolhível, sobre o qual falarei um pouco mais tarde. Aceita um valor de largura em px,%, em e outras unidades. Essencialmente, não é estritamente a largura do elemento flexível, é uma espécie de ponto de partida. Em relação ao qual o elemento se estica ou encolhe. No modo automático, o elemento obtém uma largura base relativa ao conteúdo dentro dele.

crescimento flexível em vários recursos tem uma descrição completamente incorreta. Diz que supostamente define a proporção dos tamanhos dos elementos no contêiner. Na verdade isso não é verdade. Esta propriedade especifica o fator de ampliação do elemento quando há espaço livre no container. Por padrão, esta propriedade tem o valor 0. Vamos imaginar que temos um flex container com largura de 500px, dentro dele existem dois flex items, cada um com largura base de 100px. Isso deixa outros 300px de espaço livre no contêiner. Se especificarmos flex-grow: 2; para o primeiro elemento e flex-grow: 1; Como resultado, esses blocos ocuparão toda a largura disponível do contêiner, apenas a largura do primeiro bloco será de 300px e do segundo apenas de 200px. O que aconteceu? O que aconteceu é que os 300px de espaço livre disponíveis no container foram distribuídos entre os elementos na proporção de 2:1, +200px para o primeiro e +100px para o segundo. Na verdade, é assim que funciona.

Aqui passamos suavemente para outra propriedade semelhante, a saber flexível-encolhível. O valor padrão é 1. Também define um fator para alterar a largura dos elementos, apenas na direção oposta. Se o contêiner tiver uma largura menos do que a soma da largura básica dos elementos, então esta propriedade entra em vigor. Por exemplo, o contêiner tem largura de 600px e a base flexível dos elementos é 300px. Dê ao primeiro elemento flex-shrink: 2; e ao segundo elemento flex-shrink: 1;. Agora vamos reduzir o contêiner em 300px. Portanto, a soma da largura dos elementos é 300px maior que a do container. Essa diferença é distribuída na proporção de 2:1, então subtraímos 200px do primeiro bloco e 100px do segundo. O novo tamanho dos elementos é 100px e 200px, para o primeiro e segundo elemento, respectivamente. Se definirmos flex-shrink como 0, evitaremos que o elemento encolha para um tamanho menor que sua largura base.

Na verdade, esta é uma descrição muito simplificada de como tudo funciona, de modo que o princípio geral fica claro. Mais detalhadamente, se alguém estiver interessado, o algoritmo está descrito na especificação.

Todas as três propriedades podem ser escritas de forma abreviada usando a expressão flexionar. Parece assim:
flexível: ;
E também podemos escrever mais duas versões abreviadas, flexível:automático; E flexível: nenhum;, que significa flexível: 1 1 automático; E flexível: 0 0 automático; respectivamente.

A última propriedade dos elementos flexíveis permanece alinhar-se. Tudo é simples aqui, é o mesmo que alinhar itens para um contêiner, o que permite substituir o alinhamento de um elemento específico.

É isso, estou cansado disso! Dê-nos exemplos!

Resolvemos a parte técnica, ficou bem demorada, mas é preciso entrar nisso. Agora podemos passar para a aplicação prática.
Durante o desenvolvimento desses “cinco modelos de layout responsivos realmente úteis”, tivemos que resolver situações típicas que os desenvolvedores encontram com frequência. Com o flexbox, a implementação dessas soluções torna-se mais fácil e flexível.
Vamos pegar o mesmo 4º layout, porque... tem os elementos mais interessantes.

Primeiro, vamos designar a largura principal da página, alinhá-la ao centro e pressionar o rodapé na parte inferior da página. Como sempre em geral.

Html ( background: #ccc; altura mínima: 100%; família de fontes: sans-serif; display: -webkit-flex; display: flex; direção flexível: coluna; ) corpo (margem: 0; preenchimento: 0 15px ; exibição: -webkit-flex exibição: flex-direction: coluna; flex: caixa de borda: 100%; : 960px; largura mínima: 430px; margem: automático; dimensionamento da caixa: caixa de borda: 430px;

Devido ao fato de termos especificado flex-grow: 1 para .main; ele se estende até a altura total disponível, pressionando assim o rodapé na parte inferior. O bônus desta solução é que o rodapé pode ter uma altura não fixa.

Agora vamos colocar o logotipo e o menu no cabeçalho.
.logo (tamanho da fonte: 0; margem: -10px 10px 10px 0; display: flex; flex: nenhum; alinhar itens: centro; ) .logo: antes, .logo: depois (conteúdo: ""; display: bloco ; ) .logo:before ( background: #222; largura: 50px; altura: 50px; margem: 0 10px 0 20px; raio da borda: 50%; ) .logo:after ( background: #222; largura: 90px; altura : 30px; ) .nav (margem: -5px 0 0 -5px; display: -webkit-flex; display: flex; flex-wrap: wrap; ) .nav-itm ( background: #222; largura: 130px; altura: 50px; tamanho da fonte: 1,5rem; decoração de texto: nenhum;

Como o cabeçalho possui flex-wrap: wrap; e justificar-conteúdo: espaço entre; O logotipo e o menu estão espalhados em lados diferentes do cabeçalho e, se não houver espaço suficiente para o menu, ele se moverá elegantemente sob o logotipo.

A seguir vemos um post ou banner grande, é difícil dizer o que é especificamente, mas esse não é o ponto. Temos uma imagem à direita e um texto com título à esquerda. Pessoalmente, defendo a ideia de que quaisquer elementos devem ser tão flexíveis quanto possível, independentemente de o layout ser adaptativo ou estático. Então neste post temos uma barra lateral onde é colocada uma imagem a rigor, não podemos dizer exatamente qual largura precisamos, porque hoje temos uma imagem grande, amanhã uma pequena, e não queremos refazer o elemento; do zero sempre. Isso significa que precisamos que a barra lateral ocupe o lugar necessário e o restante do espaço irá para o conteúdo. Vamos fazer isso:

Caixa (tamanho da fonte: 1,25rem; altura da linha: 1,5; estilo da fonte: itálico; margem: 0 0 40px -50px; display: -webkit-flex; display: flex; flex-wrap: wrap; justificar-conteúdo: center; auto)

Como você pode ver em .box-base, onde temos o título e o texto, especifiquei a largura da base com base flexível: 430px;, e também proibiu o encolhimento do bloco usando flex-encolher: 0;. Com esta manipulação dissemos que o conteúdo não pode ter menos de 430px de largura. E tendo em vista que para .box indico flex-wrap: envoltório; no momento em que a barra lateral e o conteúdo não couberem no container.box, a barra lateral cairá automaticamente sob o conteúdo. E tudo isso sem aplicação @meios de comunicação! Eu acho que isso é realmente muito legal.

Ficamos com conteúdo de três colunas. Existem várias soluções para esse problema, vou mostrar uma delas em outros layouts existe outra opção;
Vamos criar um container, chamá-lo de .content e configurá-lo.
.content (margem inferior: 30px; display: -webkit-flex; display: flex; flex-wrap: wrap; )

O contêiner possui três colunas, .banners, .posts, .comments
.banners (flex: 1 1 200px; ) .posts (margem: 0 0 30px 30px; flex: 1 1 200px; ) .comments (margem: 0 0 30px 30px; flex: 1 1 200px; )

Dei às colunas uma largura base de 200px para que elas não se estreitassem muito, mas seria melhor se elas fossem movidas umas sob as outras conforme necessário.

De acordo com o layout, não poderemos prescindir de @media com o conteúdo, então vamos ajustar um pouco mais o comportamento das colunas para largura<800px и <600px.
@media screen e (largura máxima: 800px) ( .banners ( margin-left: -30px; display: -webkit-flex; display: flex; flex-basis: 100%; ) .posts ( margin-left: 0; ) ) @media screen e (largura máxima: 600px) ( .content ( display: block; ) .banners ( margin: 0; display: block; ) .comments ( margin: 0; ) )

Essa é toda a mágica quando se trata de criar um layout no FlexBox. Outra tarefa que gostei está no 5º layout, especificamente no que diz respeito à adaptação de conteúdo.

Vemos como na resolução do desktop as postagens são construídas em uma grade de três seguidas. Quando a largura da janela de visualização fica menor que 800px, a grade se transforma em uma coluna com postagens, onde a foto da postagem é alinhada nos lados esquerdo e direito do conteúdo da postagem, alternadamente. E se a largura for menor que 600px, a foto da postagem fica completamente oculta.
.grid ( display: -webkit-flex; display: flex; flex-wrap: wrap; justificar-conteúdo: espaço entre; ) .grid-itm ( margem inferior: 30px; base flexível: calc (33,33% - 30px * 2/3); exibição: -webkit-flex; exibição: flex-wrap: wrap; ) .grid-img (margem: 0 auto 20px; flex: 0 1 80%; ) .grid-cont( flex: 0 1 100%; grid-img (flex: 0 0 automático; ) .grid-itm:nth-child(even) .grid-img (margem: 0 0 0 30px; ordem: 2; ) .grid-itm:nth-child (ímpar) .grid-img ( margin: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title ( text-align: left; ) ) @media screen e (max-width: 600px) ( .grid-img (exibição: nenhum; ) )

Na verdade, isso é apenas uma pequena parte do que pode ser implementado com o FlexBox. A especificação permite construir layouts de página muito complexos usando código simples.

O Flexbox pode ser considerado uma tentativa bem-sucedida de resolver uma grande variedade de problemas ao construir layouts em CSS. Mas antes de passarmos à sua descrição, vamos descobrir o que há de errado com os métodos de layout que usamos agora.

Qualquer designer de layout conhece várias maneiras de alinhar algo verticalmente ou fazer um layout de 3 colunas com uma coluna intermediária emborrachada. Mas vamos admitir que todos esses métodos são bastante estranhos, parecem um hack, não são adequados em todos os casos, são difíceis de entender e não funcionam se certas condições mágicas que se desenvolveram historicamente não forem atendidas.

Isso aconteceu porque o HTML e o CSS se desenvolveram evolutivamente. No início, as páginas da web pareciam documentos de texto de thread único, um pouco mais tarde, a divisão da página em blocos era feita com tabelas, depois virou moda o layout com carros alegóricos e, após a morte oficial do IE6, as técnicas de bloco inline foram também adicionado. Como resultado, herdamos uma mistura explosiva de todas essas técnicas, usadas para construir layouts para 99,9% de todas as páginas web existentes.

Organização multilinha de blocos dentro de um flex container.

envoltório flexível

Todos os exemplos que demos acima foram construídos levando em consideração a disposição dos blocos em linha única (coluna única). Deve-se dizer que, por padrão, um flex container sempre organizará os blocos dentro de si em uma linha. No entanto, a especificação também suporta o modo multilinha. A propriedade CSS flex-wrap é responsável pelo conteúdo multilinha dentro de um flex container.

Valores disponíveis envoltório flexível:

agorarap (valor padrão): os blocos são organizados em uma linha da esquerda para a direita (em rtl da direita para a esquerda)
wrap: os blocos são dispostos em várias linhas horizontais (se não couberem em uma linha). Eles seguem um ao outro da esquerda para a direita (em rtl da direita para a esquerda)
wrap-reverse: o mesmo que enrolar, mas os blocos são organizados na ordem inversa.

flex-flow é uma abreviação conveniente para flex-direction + flex-wrap

Em essência, o flex-flow fornece a capacidade de descrever a direção do eixo transversal principal e multilinha em uma propriedade. Fluxo flexível padrão: linha nowrap .

fluxo flexível:<‘flex-direction’> || <‘flex-wrap’>

CSS

/* ou seja ... */ .my-flex-block( flex-direcrion:column; flex-wrap: wrap; ) /* é o mesmo que... */ .my-flex-block( flex-flow: quebra de coluna )

alinhar conteúdo

Há também uma propriedade align-content, que determina como as linhas de blocos resultantes serão alinhadas verticalmente e como dividirão todo o espaço do flex container.

Importante: align-content só funciona no modo multilinha (ou seja, no caso de flex-wrap:wrap; ou flex-wrap:wrap-reverse;)

Valores disponíveis alinhar conteúdo:

flex-start: linhas de blocos são pressionadas no início do flex container.
flex-end: linhas de blocos são pressionadas no final do flex container
center: fileiras de blocos estão no centro do flex container
espaço entre: a primeira linha de blocos está localizada no início do flex container, a última linha de blocos está no final, todas as outras linhas são distribuídas uniformemente no espaço restante.
space-around: fileiras de blocos são distribuídas uniformemente do início ao fim do flex container, dividindo igualmente todo o espaço disponível.
esticar (valor padrão): As fileiras de blocos são esticadas para ocupar todo o espaço disponível.

As propriedades CSS flex-wrap e align-content devem ser aplicadas diretamente ao flex container, não aos seus filhos.

Demonstração de propriedades multilinhas em flex

Regras CSS para elementos filhos de um contêiner flexível (blocos flexíveis)

flex-basis – o tamanho básico de um único bloco flexível

Define o tamanho inicial do eixo principal para um bloco flexível antes que as transformações baseadas em outros fatores flexíveis sejam aplicadas a ele. Pode ser especificado em qualquer unidade de comprimento (px, em,%, ...) ou automático (padrão). Se definido como automático, as dimensões do bloco (largura, altura) são tomadas como base, as quais, por sua vez, podem depender do tamanho do conteúdo, se não forem especificadas explicitamente.

flex-grow – “ganância” de um único bloco flexível

Determina o quanto maior um bloco flexível individual pode ser do que elementos adjacentes, se necessário. flex-grow aceita um valor adimensional (padrão 0)

Exemplo 1:

Se todas as caixas flexíveis dentro de um contêiner flexível tiverem flex-grow:1 então elas terão o mesmo tamanho
Se um deles tiver flex-grow:2 então será 2 vezes maior que todos os outros

Exemplo 2:

Se todas as caixas flexíveis dentro de um contêiner flexível tiverem flex-grow:3 então elas terão o mesmo tamanho
Se um deles tiver flex-grow:12 então será 4 vezes maior que todos os outros

Ou seja, o valor absoluto de flex-grow não determina a largura exata. Determina seu grau de “ganância” em relação a outros blocos flexíveis do mesmo nível.

flex-shrink – o fator de “compressibilidade” de um único bloco flexível

Determina quanto o bloco flexível encolherá em relação aos elementos adjacentes dentro do contêiner flexível se não houver espaço livre suficiente. O padrão é 1.

flex – abreviatura para as propriedades flex-grow, flex-shrink e flex-basis

flexível: nenhum | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

CSS

/* ou seja ... */ .my-flex-block( flex-grow:12; flex-shrink:3; base flexível: 30em; ) /* é o mesmo que... */ .my-flex-block( flex : 12 3 30h)

Demonstração para flex-grow, flex-shrink e flex-basis

alinhar-self – alinhamento de um único bloco flexível ao longo do eixo transversal.

Torna possível substituir a propriedade align-items do flex container para um bloco flexível individual.

Valores de alinhamento automático disponíveis (mesmas 5 opções de itens de alinhamento)

flex-start: o bloco flexível é pressionado no início do eixo transversal
flex-end: o bloco flexível é pressionado contra o final do eixo transversal
centro: o bloco flexível está localizado no centro do eixo transversal
linha de base: o bloco flexível está alinhado à linha de base
esticar (valor padrão): O bloco flexível é esticado para ocupar todo o espaço disponível ao longo do eixo transversal, levando em consideração a largura mínima/largura máxima, se definida.

ordem – a ordem de um único bloco flexível dentro de um contêiner flexível.

Por padrão, todos os blocos seguirão uns aos outros na ordem especificada no html. No entanto, esta ordem pode ser alterada usando a propriedade order. É especificado como um número inteiro e o padrão é 0.

O valor do pedido não especifica a posição absoluta do elemento na sequência. Determina o peso da posição do elemento.

HTML

item 1

item2

item3

item4

item5

Neste caso, os blocos seguirão um após o outro ao longo do eixo principal na seguinte ordem: item5, item1, item3, item4, item2

Demonstração para alinhamento e ordem

margem: automático verticalmente. Sonhos se tornam realidade!

Você pode adorar o Flexbox pelo menos porque o familiar alinhamento horizontal via margin:auto também funciona aqui para verticais!

My-flex-container ( display: flex; height: 300px; /* Ou qualquer que seja */ ) .my-flex-block ( width: 100px; /* Ou qualquer que seja */ height: 100px; /* Ou qualquer que seja * / margin: auto; /* Magic! O bloco é centralizado verticalmente e horizontalmente */ )

Coisas para lembrar

Você não deve usar o flexbox onde não for necessário.
Definir regiões e alterar a ordem do conteúdo em muitos casos ainda é útil para tornar dependente da estrutura da página. Pensar sobre isso.
Entenda o flexbox e conheça o básico. Isso torna muito mais fácil alcançar o resultado esperado.
Não se esqueça das margens. Eles são levados em consideração ao definir o alinhamento dos eixos. Também é importante lembrar que as margens no flexbox não “colapsam” como acontece em um fluxo normal.
O valor float dos blocos flexíveis não é levado em consideração e não tem significado. Provavelmente, isso pode ser usado de alguma forma para uma degradação elegante ao mudar para o flexbox.
O Flexbox é muito adequado para o layout de componentes da web e partes individuais de páginas da web, mas não mostrou seu melhor lado ao criar layouts básicos (posição do artigo, cabeçalho, rodapé, barra de navegação, etc.). Este ainda é um ponto controverso, mas este artigo mostra as deficiências de forma bastante convincente xanthir.com/blog/b4580

Finalmente

Acho que o flexbox, é claro, não suplantará todos os outros métodos de layout, mas, é claro, em um futuro próximo ocupará um nicho digno na resolução de um grande número de tarefas. E claro, você precisa tentar trabalhar com ele agora. Um dos artigos a seguir será dedicado a exemplos específicos de trabalho com layout flexível. Assine novidades ;)

Contente:

Caixa flexívelé uma nova maneira de organizar blocos na página. Esta é uma tecnologia criada especificamente para o layout de elementos, ao contrário dos carros alegóricos. Usando Caixa flexível Você pode facilmente alinhar elementos horizontal e verticalmente, alterar a direção e a ordem de exibição dos elementos, esticar os blocos até a altura total do pai ou pregá-los na borda inferior.

Atualização de 02/02/2017: Fiz uma folha de dicas conveniente no Flexbox, com demonstrações ao vivo e descrições da especificação: Folha de dicas do Flexbox.

Os exemplos usam apenas a nova sintaxe. No momento em que este artigo foi escrito, eles eram exibidos mais corretamente em cromada. Eles funcionam parcialmente no Firefox, mas não no Safari.

De acordo com caniuse.com, Caixa flexível não é compatível com IE 8 e 9 e Opera Mini, e em outros navegadores nem todas as propriedades são suportadas e/ou prefixos são necessários.

Isso significa que a tecnologia não pode ser amplamente utilizada neste momento, mas agora é a hora de conhecê-la melhor.

Primeiro você precisa saber que os elementos flexíveis são organizados ao longo de eixos. Por padrão, os elementos são organizados horizontalmente - ao longo eixo principal- eixo principal.

Também deve-se ter em mente que ao usar Caixa flexível float , clear e vertical-align não funcionam para blocos internos, bem como propriedades que definem colunas no texto.

Vamos preparar um campo de testes para experimentos:

Um bloco pai (amarelo) e 5 blocos filhos.

Exibição: flexível

E agora adicionamos display: flex ao elemento pai. . Os divs internos são alinhados (ao longo do eixo principal) com colunas da mesma altura, independentemente do conteúdo.

exibição: flexível; Torna todos os elementos filhos flexíveis, em vez de inline ou baseados em blocos, como era originalmente o caso.

Se o bloco pai contiver imagens ou texto sem wrappers, eles se tornarão itens flexíveis anônimos.

Exibir propriedade para Caixa flexível pode assumir dois significados:

flex - se comporta como um elemento de bloco. Ao calcular a largura dos blocos, o layout tem prioridade (se os blocos não forem largos o suficiente, o conteúdo pode ultrapassar os limites).

inline-flex – se comporta como um bloco inline. O conteúdo tem prioridade (o conteúdo espalha os blocos na largura necessária para que as linhas caibam, se possível).

Direção flexível

A direção do layout do bloco é controlada pela propriedade flex-direction.

Valores possíveis:

linha - linha (valor padrão); row-reverse - uma linha com elementos na ordem inversa; coluna - coluna; column-reverse - uma coluna com elementos na ordem inversa.

linha e linha reversa

coluna e coluna reversa

Envoltório flexível

Pode haver muitos blocos em uma linha. Se eles serão agrupados ou não, é determinado pela propriedade flex-wrap.

Valores possíveis:

nowrap - os blocos não são transferidos (valor padrão); wrap - os blocos são transferidos; wrap-reverse - os blocos são agrupados e organizados na ordem inversa.

Para abreviar as propriedades flex-direction e flex-wrap, existe uma propriedade: flex-flow .

Valores possíveis: você pode definir ambas as propriedades ou apenas uma. Por exemplo:

fluxo flexível: coluna; flex-flow: wrap-reverso; flex-flow: envoltório reverso de coluna;

Demonstração para reversão de linha reversa:

Ordem

Para controlar a ordem dos blocos, use a propriedade order.

Valores possíveis: números. Para colocar o bloco primeiro, dê ordem: -1:

Justificar conteúdo

Existem diversas propriedades para alinhar elementos: justify-content , align-items e align-self .

justificar-content e alinhar itens são aplicados ao contêiner pai, alinhar-self é aplicado aos contêineres filhos.

justifique-conteúdo é responsável pelo alinhamento do eixo principal.

Valores possíveis para justificar o conteúdo:

flex-start - os elementos são alinhados desde o início do eixo principal (valor padrão); flex-end - os elementos são alinhados a partir do final do eixo principal; centro - os elementos são alinhados ao centro do eixo principal; espaço entre - os elementos são alinhados ao longo do eixo principal, distribuindo o espaço livre entre si; space-around - os elementos são alinhados ao longo do eixo principal, distribuindo o espaço livre ao seu redor.

flex-start e flex-end

espaço entre, espaço ao redor

Alinhar itens

align-items é responsável pelo alinhamento ao longo do eixo perpendicular.

Possíveis valores de alinhamento de itens:

flex-start - os elementos são alinhados desde o início do eixo perpendicular; flex-end - os elementos são alinhados a partir do final do eixo perpendicular; centro - os elementos são alinhados no centro; linha de base - os elementos são alinhados ao longo da linha de base; esticar - os elementos são esticados, ocupando todo o espaço ao longo do eixo perpendicular (valor padrão).

início flexível, fim flexível

linha de base, alongamento

Alinhar-se

alinhar-self também é responsável pelo alinhamento do eixo perpendicular, mas é definido para elementos flexíveis individuais.

Valores possíveis para alinhar-se:

automático é o valor padrão. Indica que o elemento usa os itens de alinhamento do elemento pai; flex-start - o elemento é alinhado desde o início do eixo perpendicular; flex-end - o elemento é alinhado a partir do final do eixo perpendicular; centro - o elemento está alinhado ao centro; linha de base - o elemento está alinhado ao longo da linha de base; esticar - o elemento é esticado, ocupando todo o espaço da altura.

Alinhar conteúdo

Para controlar o alinhamento dentro de um flex container multilinha, existe a propriedade align-content.

Valores possíveis:

flex-start - os elementos são alinhados desde o início do eixo principal; flex-end - os elementos são alinhados a partir do final do eixo principal; centro - os elementos são alinhados ao centro do eixo principal; espaço entre - os elementos são alinhados ao longo do eixo principal, distribuindo o espaço livre entre si; space-around - os elementos são alinhados ao longo do eixo principal, distribuindo o espaço livre ao seu redor; esticar - os elementos são esticados para preencher toda a altura (valor padrão).

início flexível, fim flexível

centro, esticar

espaço entre, espaço ao redor

Ps: Nunca consegui ver algumas coisas em ação, por exemplo, a linha flex-flow: column wrap ou a entrada completa da mesma flex-direction: column; flex-wrap: envoltório; .

Os elementos ficam em uma coluna, mas não são transferidos:

wrap não funciona com flex-direction: column; , embora nas especificações pareça assim:

Acho que funcionará com o tempo.

Atualização de 21/06/2014: tudo funciona se você definir a altura do bloco. Obrigado pela dica

Neste artigo, apresentaremos a tecnologia CSS Flexbox, projetada para criar layouts flexíveis de páginas da web.

Suporte de navegador para tecnologia CSS Flexbox

A tecnologia Flexbox já é suportada por quase todos os navegadores usados atualmente (usando prefixos: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+) .

Noções básicas do Flexbox (grade)

Flexbox é baseado em uma grade. Consiste em apenas 2 elementos. O primeiro elemento é contêiner flexível. A criação de um contêiner flexível é feita adicionando uma propriedade de exibição CSS com o valor flex ou flex-inline ao elemento HTML necessário.

Depois disso todos os filhos imediatos de um flex container(crianças) tornam-se automaticamente elementos flexíveis(2º elemento de grade flexbox).

Marcação HTML:

Flex-container ( display: flex; /* flex || inline-flex */ ) Estrutura de grade do Flexbox

Os itens flexíveis, por padrão, ocupam toda a altura do flex container.

O valor de flex ou flex-inline determina como contêiner flexível será apresentado na página. Se precisar ser representado como bloquear e use o valor flex. Se um elemento precisa ser representado como minúscula e use o valor flex-inline. Neste caso, ocupará todo o espaço de página necessário para exibir seus elementos.

Direção de alinhamento do elemento flexível

A especificação da direção de alinhamento dos elementos flexíveis dentro de um contêiner flexível é feita usando eixos.

No flexbox eles alocam 2 eixos. O primeiro eixo é chamado básico ou principal(direcionado para a direita por padrão). Segundo - transversal(para baixo por padrão).

Os itens em um flex container são organizados em uma linha (por padrão), mesmo quando não há espaço suficiente para eles. Os elementos flexíveis são organizados em um contêiner flexível ao longo do eixo principal.

Arranjo padrão de elementos no contêiner (itens flexíveis que não têm espaço suficiente no contêiner flexível ficam fora dele)

No CSS Flexbox, permitir que itens flexíveis sejam movidos para novas linhas (se eles não tiverem espaço suficiente na linha atual) é feito definindo a propriedade flex-wrap do contêiner flexível CSS como wrap ou wrap-reverse .

Flex-wrap: envoltório; /* nowrap (em uma linha - padrão) wrap (permite agrupar itens flexíveis em novas linhas) wrap-reverse (envolver itens flexíveis na ordem inversa) */

Os valores wrap e wrap-reverse da propriedade CSS flex-wrap determinam a direção do eixo cruzado.

Definir a direção do eixo principal de um flexbox é feito usando a propriedade CSS flex-direction.

Direção flexível: linha; /* linha (direita) - padrão linha reversa (esquerda) coluna (para baixo) coluna reversa (para cima) */

Usando esta propriedade, você pode garantir que os elementos flexíveis não sejam organizados horizontalmente (em linhas), mas verticalmente (em colunas).

As propriedades flex-direction e flex-wrap podem ser especificadas usando a propriedade CSS genérica flex-flow:

Fluxo flexível: linha agorarap; /* 1 valor - direção flexível, 2 valor - flex-wrap */

Alinhando itens flexíveis

No Flexbox, o alinhamento dos elementos dentro de um container é realizado em duas direções (eixos).

Alinhando itens flexíveis ao longo do eixo principal

O alinhamento dos elementos ao longo do eixo principal é feito usando a propriedade CSS justificar-content:

justificar-conteúdo: flex-start; /* flex-start (os elementos flexíveis são alinhados em relação ao início do eixo) – por padrão, flex-end (os elementos flexíveis são alinhados em relação ao final do eixo) center (no centro do flex container) space-between (uniformemente, ou seja, com a mesma distância entre elementos flexíveis) space-around (uniformemente, mas adicionando metade do espaço antes do primeiro elemento flexível e depois do último) */ Opções para alinhar elementos flexíveis ao longo do eixo principal

Alinhando itens flexíveis ao longo do eixo cruzado

O alinhamento de flex items em um flex container ao longo do eixo transversal é feito usando a propriedade CSS align-items:

Alinhar itens: esticar; /* esticar (alongar ao longo de todo o comprimento do eixo transversal) - por padrão flex-start (em relação ao início do eixo transversal) flex-end (em relação ao final do eixo transversal) linha de base (em relação à linha de base ) center */ Opções para alinhar elementos flexíveis ao longo do eixo transversal

Alinhando linhas de contêineres flexíveis

CSS Flexbox permite alinhar não apenas os próprios elementos flexíveis, mas também as linhas nas quais eles estão localizados.

Align-content: stretch /* stretch (esticado ao longo de todo o comprimento do eixo transversal) – por padrão flex-start (em relação ao início do eixo transversal) flex-end (em relação ao final do eixo transversal) center ( no centro) space-between (uniformemente, ou seja, com a mesma distância entre as linhas) space-around (uniformemente, mas adicionando metade do espaço antes da primeira linha e depois da última) */ Opções para alinhar linhas de um flex container

A propriedade align-content só faz sentido usar quando os itens flexíveis em um contêiner flexível estão localizados em várias linhas. Para que isso aconteça é necessário, em primeiro lugar, que a largura de todos os elementos flex seja maior que a largura do flex container e, em segundo lugar, o flex container deve ter a propriedade CSS flex-wrap configurada como wrap ou wrap-reverse.

propriedade CSS de alinhamento próprio

A propriedade align-self, ao contrário das anteriores (justify-content , align-items e align-content), destina-se a elementos flexíveis. Ele permite que você altere alinhamento de elemento flexível ao longo da direção do eixo transversal. A propriedade align-self pode assumir os mesmos valores que align-items .

Alinhar itens: esticar; /* automático (padrão) || esticar || início flexível || extremidade flexível || linha de base || Centro */

Flex-container ( display: flex; largura: 300px; altura: 150px; alinhar itens: centro; preenchimento: 10px; cor de fundo: #efefef; ) .flex-container_element-1, .flex-container_element-2, .flex -container_element-3, .flex-container_element-4 (flex-basis: 70px; text-align: center; preenchimento: 15px; tamanho da fonte: 30px; ) .flex-container_element-1 (align-self: flex-start; fundo: #fe4; ) .flex-container_element-2 (align-self: flex-end; fundo: rosa; ) .flex-container_element-3 (align-self: stretch; background: lime; ) .flex-container_element-4 (align-self: auto; background: cyan; ) Como funciona a propriedade alinhamento-self do CSS

Alterando a ordem dos itens flexíveis

Por padrão, os itens flexíveis são exibidos no flex container na ordem em que aparecem no código HTML. Para alterar a ordem de alguns elementos flexíveis em relação a outros no CSS Flexbox, você pode usar a propriedade order. Esta propriedade CSS organiza os elementos flexíveis em um contêiner flexível em ordem crescente de seus números.

Ordem: 0; /* 0 (padrão) inteiro positivo ou negativo */

Por exemplo:

...

CSS: .flex-container ( display: flex; ) /* move o 2º elemento flexível para o final */ .flex-container_element-2 ( order: 2; ) /* move o 3º elemento para 2 */ .flex-container_element-3 ( order: 1; ) /* posiciona 4 elementos flexíveis antes de 1 */ .flex-container_element-4 ( order: -1; ) Como funciona a propriedade CSS order

Controlando a largura de um elemento flexível

Flexbox possui várias propriedades CSS que determinam a largura de um elemento flexível.

Propriedade CSS flexível

Este imóvel destina-se a definindo a largura inicial de um elemento flexível. Você pode definir o valor da largura usando várias unidades de medida, como px,%, em, etc. Por padrão, esta propriedade é definida como automática (neste caso, a largura do elemento será calculada automaticamente com base em seu conteúdo) .

A largura final do item flexível será determinada por dependendo dos valores das propriedades CSS flex-grow e flex-shrink que são definidas não apenas para este elemento, mas também para outros elementos flex deste flex container.

propriedade CSS flex-grow

Esta propriedade determina se a largura inicial do elemento flexível aumenta (cresce). Aumentar a largura de um elemento flexível é feito por espaço de linha livre. O valor da propriedade CSS flex-grow é inteiro. É este valor que determina (se for maior ou igual a 1) que parte do espaço livre o elemento flex ocupará para si.

Por exemplo:

...

CSS: .flex-container ( display: flex; largura: 600px; ) .flex-container_element-1 ( flex-basis: 40%; flex-grow: 1; ) .flex-container_element-2 ( flex-basis: 40% ; flex-grow: 4;) Como funciona a propriedade CSS flex-grow

Neste exemplo, se os itens flexíveis estiverem localizados na mesma linha e houver espaço livre (600×(1-0,8)=120px):

1/5 deste espaço será adicionado à largura de element.flex-container_element-1 (120×1/5=24px);
4/5 deste espaço será adicionado à largura do element.flex-container_element-2 (120×4/5=96px).

Em outras palavras, a propriedade CSS flex-grow permite não apenas especificar que a largura de um elemento flex pode crescer, mas também especificar quanto esse valor pode crescer em relação a outros elementos.

Por padrão, a propriedade CSS flex-grow é definida como 0. Isso significa que o elemento flex não pode crescer (aumentar sua largura).

propriedade CSS flex-shrink

Esta propriedade determina se a largura de um elemento flexível pode ser reduzida. A redução da largura de um elemento flexível só acontecerá se a largura da linha não será suficiente para exibir todos os itens flexíveis localizado nele. A largura necessária é calculada em com base na largura inicial, que contém todos os elementos flex.

Por exemplo:

...

CSS: .flex-container ( display: flex; largura: 500px; ) .flex-container_element-1 ( flex-basis: 300px; flex-shrink: 1; ) .flex-container_element-2 ( flex-basis: 300px; flex -shrink: 3;) Como funciona a propriedade CSS flex-shrink

A largura do contêiner flexível é 500px. Itens flexíveis requerem 600px para serem exibidos. Como resultado, faltam 100px. Neste exemplo, 2 elementos flexíveis (.flex-container_element-1 e .flex-container_element-2) podem ser reduzidos. A largura do primeiro flex element.flex-container_element-1 neste caso será 300 – 1/4*100= 275px. A largura do segundo flex element.flex-container_element-2 neste caso será 300 – 3/4*100= 225px.

Valor padrão:

Flex-encolhimento: 1;

Se você precisar evitar que a largura de um elemento flexível diminua, você deverá especificar o número 0 como o valor da propriedade flex-shrink.

Propriedade flexível CSS

Para definir facilmente flex-grow, flex-shrink e flex-basis, você pode usar a propriedade flex CSS.

Valor padrão:

Flexível: 0 1 automático; /* 0 - flex-grow (1º valor) 1 - flex-shrink (2º valor) auto - flex-basis (3º valor) */

Layout de página usando CSS Flexbox

Nesta seção, criaremos um layout responsivo simples usando Flexbox.

A estrutura do layout consistirá em 3 seções:

cabeçalho (para exibir o cabeçalho e o menu principal);
main (para exibir a parte principal);
rodapé (para rodapé).

A parte principal, por sua vez, será dividida em mais 2 seções (iremos posicioná-las utilizando CSS Flexbox). Em telas grandes (>=992px) essas seções serão alinhadas horizontalmente, e em outras telas - verticalmente (<992px).

[Cabeçalho da página...]

[Parte principal...]

CSS: /* container (define a largura do bloco dependendo da largura da janela de visualização) */ .container ( position: relativo; margin-left: auto; margin-right: auto; padding-right: 15px; padding-left: 15px; ) @ media (largura mínima: 576px) ( .container ( largura: 540px; largura máxima: 100%; ) ) @media (largura mínima: 768px) ( .container ( largura: 720px; largura máxima: 100%; ) ) @media (largura mínima: 992px) ( .container ( largura: 960px; largura máxima: 100%; ) ) @media (largura mínima: 1200px) ( .container ( largura: 1140px; largura máxima: 100 % ; ) ) /* contêiner flexível */ .row-flex ( display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; - ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px ) /* Configurações de elementos flexíveis CSS */ .col-flex (posição: relativa; largura: 100%; altura mínima: 1px; preenchimento à direita: 15px; preenchimento à esquerda: 15px; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flexível: 0 0 100%; largura máxima: 100%; ) /* largura do artigo e blocos laterais para telas grandes */ @media (min-width: 992px) ( /* 2/3 da largura do contêiner */ .main_article ( -webkit-box-flex: 0; -webkit-flex : 0 0 66,666667%; -ms-flex: 0 0 66,666667%; flex: 0 0 66,666667%; max-width: 66,666667% ) /* 1/3 da largura do contêiner */ .main_aside ( -webkit-box-flex: 0; -webkit-flex: 0 0 33,333333%; -ms-flex: 0 0 33,333333%;

Para suportar o layout na maioria dos navegadores, adicionaremos os prefixos necessários e a largura máxima ao CSS.

Para “transformar” um bloco em um flex container, usaremos a classe row-flex. Definiremos a largura de cada elemento flex (main_article e main_aside) dentro do flex container usando a propriedade flex CSS.

Como exemplo, vamos usar o Flexbox para marcar o bloco “Rodapé” e a seção do artigo principal “Coisas interessantes no site”.

Dividiremos a seção “Rodapé” em 4 partes iguais (a largura mínima de uma parte é 200px), e a seção “Coisas interessantes do site” em 3 partes (a largura mínima de uma parte é 300px).

[Cabeçalho da página...]

[Parte principal...]

[mais 1...]

[mais 2...]

[mais 3...]

CSS adicional:

Footer_block, .main_other_article ( -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; - ms-flex-positivo: 1; flex-grow: 1; largura máxima: 100% )

Módulo Layout da caixa flexível(caixa flexível - atualmente uma recomendação candidata do W3C) visa fornecer uma forma mais eficiente de layout, alinhamento e distribuição de espaço livre entre elementos em um contêiner, mesmo quando seu tamanho é desconhecido e/ou dinâmico (daí a palavra "flexível") .

A ideia principal do layout flexível é dar ao contêiner a capacidade de alterar a largura/altura (e ordem) de seus elementos para melhor preencher o espaço (na maioria dos casos, para suportar todos os tipos de displays e tamanhos de tela). Um contêiner flexível estica os elementos para preencher o espaço ou os comprime para evitar que transbordem.

Mais importante ainda, um layout flexbox é independente da direção, ao contrário dos layouts regulares (caixas dispostas verticalmente e elementos embutidos dispostos horizontalmente). Embora o layout regular seja ótimo para páginas da web, ele carece de flexibilidade (sem trocadilhos) para suportar aplicativos grandes ou complexos (especialmente quando se trata de alterar a orientação da tela, redimensionar, esticar, encolher, etc.).

Comente: o layout Flexbox é mais adequado para componentes de aplicativos e layouts de pequena escala, enquanto o layout Grid é mais usado para layouts de grande escala.

Fundamentos

Porque flexbox é um módulo completo, não apenas uma propriedade, ele combina muitas propriedades. Alguns deles devem ser aplicados ao contêiner (o elemento pai, o chamado contêiner flexível), enquanto outras propriedades se aplicam a elementos filhos, ou elementos flexíveis.

Se um layout regular é baseado nas direções de fluxo de elementos de bloco e embutidos, então um layout flexível é baseado em “direções de fluxo flexíveis”. Confira este diagrama da especificação que explica a ideia básica por trás dos layouts flexíveis.

Basicamente os elementos serão distribuídos ao longo eixo principal(de início principal antes fim principal), ou junto eixo transversal(de início cruzado antes extremidade cruzada).

eixo principal- o eixo principal ao longo do qual os elementos flexíveis estão localizados. Observe que não precisa ser horizontal, tudo depende da propriedade flex-direction (veja abaixo).
início principal | fim principal- os elementos flexíveis são colocados no contêiner da posição inicial principal até a posição final principal.
tamanho principal- largura ou altura do elemento flexível dependendo do valor principal selecionado. A quantidade base pode ser a largura ou a altura do elemento.
eixo transversal- eixo transversal perpendicular ao principal. Sua direção depende da direção do eixo principal.
início cruzado | extremidade cruzada- as linhas flexíveis são preenchidas com elementos e colocadas no contêiner desde a posição inicial cruzada até a posição final cruzada.
tamanho cruzado- a largura ou altura do elemento flexível, dependendo da dimensão selecionada, é igual a este valor. Esta propriedade é igual à largura ou altura do elemento dependendo da dimensão selecionada.

Propriedades

exibição: flexível | flexível em linha;

Aplica-se a:

Define um flex container (inline ou block dependendo do valor selecionado), conecta um contexto flex para todos os seus filhos imediatos.

exibição: outros valores | flexível | flexível em linha;

Tenha em mente:

Colunas CSS não funcionam com flex container
float , clear e vertical-align não funcionam com itens flexíveis