Todas as propriedades do flexbox. Flexbox: Um Novo Princípio de Layout CSS. Fazendo um layout adaptável

Resumindo, o layout com Flexbox nos dá soluções simples para tarefas antes difíceis. Por exemplo, quando você precisa alinhar um elemento verticalmente, ou empurrar o rodapé para a parte inferior da tela, ou simplesmente inserir vários blocos em uma linha para que eles ocupem todo o espaço livre. Tarefas semelhantes são resolvidas sem flex. Mas como regra, essas soluções são mais como "muletas" - truques para usar css para outros fins. Considerando que com o flexbox, tais tarefas são resolvidas exatamente como o modelo flex concebe.

CSS Flexible Box Layout Module (módulo CSS para layouts com blocos flexíveis), flexbox em resumo, foi criado para eliminar as desvantagens ao criar uma grande variedade de estruturas HTML, incluindo aquelas adaptadas a diferentes larguras e alturas, e tornar o layout lógico e simples . E a abordagem lógica, via de regra, funciona em lugares inesperados, onde o resultado não foi verificado - a lógica é tudo para nós!

O Flexbox permite controlar de maneira elegante uma ampla variedade de parâmetros para elementos dentro de um contêiner: direção, ordem, largura, altura, alinhamento ao longo e transversalmente, distribuição de espaço livre, alongamento e redução de elementos.

Conhecimento básico

Um FlexBox consiste em um Container e seus Elementos Filhos (itens) (itens flexíveis).

Para habilitar o flexbox, qualquer elemento HTML precisa apenas definir a propriedade css para display:flex; ou exibição: inline-flex; .

Após habilitar a propriedade flex, dois eixos são criados dentro do container: principal e transversal (perpendicular (⊥), eixo transversal). Todos os elementos aninhados (do primeiro nível) são alinhados ao longo do eixo principal. Por padrão, o eixo principal é horizontal e tem direção da esquerda para a direita (→), e o eixo transversal é respectivamente vertical e direcionado de cima para baixo (↓).

Os eixos principal e transversal podem ser trocados, então os elementos serão localizados de cima para baixo (↓) e quando não caberem mais em altura, eles se moverão da esquerda para a direita (→) - ou seja, os eixos simplesmente trocados. Nesse caso, o início e o fim do arranjo dos elementos não mudam - apenas as direções (eixos) mudam! É por isso que você precisa pensar em eixos dentro de um contêiner. No entanto, não se deve pensar que existem alguns eixos “físicos” e eles afetam alguma coisa. O eixo aqui é apenas a direção do movimento dos elementos dentro do contêiner. Por exemplo, se especificarmos o alinhamento dos elementos no centro do eixo principal e depois alterarmos a direção desse eixo principal, o alinhamento também mudará: os elementos estavam no meio horizontalmente e se tornaram no meio verticalmente. . Consultar exemplo.

Outra característica importante do Flexbox é a presença de linhas no sentido transversal. Para entender do que estamos falando, vamos imaginar que existe um eixo horizontal principal, muitos elementos e eles não "escalam" no container, então passam para outra linha. Aqueles. o container fica assim: um container, dentro dele tem duas linhas, cada linha tem vários elementos. Representado? E agora lembre-se de que podemos alinhar verticalmente não apenas elementos, mas também linhas! Como funciona é visto claramente no exemplo para o . E é assim que fica esquematicamente:

Propriedades CSS que podem afetar o modelo de layout: float , clear , vertical-align , columns não funcionam em construções flex. Um modelo de layout diferente é usado aqui e essas propriedades CSS são simplesmente ignoradas.

Propriedades CSS do Flexbox

Flexbox contém diferentes regras de CSS para controlar todo o design flex. Alguns precisam ser aplicados ao contêiner principal e outros aos elementos desse contêiner.

Para recipiente

Habilita a propriedade flex para o elemento. O próprio elemento e os elementos aninhados nele se enquadram nesta propriedade: apenas os descendentes do primeiro nível são afetados - eles se tornarão os elementos do contêiner flex.

• flexionar- o elemento se estende em toda a sua largura e tem todo o seu espaço entre os blocos circundantes. Há uma quebra de linha no início e no final do bloco.
• inline-flex- o elemento é envolvido por outros elementos. Ao mesmo tempo, sua parte interna é formatada como um elemento de bloco e o próprio elemento é formatado como um elemento inline.

flex e inline-flex diferem na medida em que interagem de maneira diferente com os elementos circundantes, semelhante a display:block e display:inline-block .

Altera a direção do eixo principal do contêiner. O eixo transversal muda de acordo.

• linha (padrão)- direção dos elementos da esquerda para a direita (→)
• coluna- direção dos elementos de cima para baixo (↓)
• linha reversa- direção dos elementos da direita para a esquerda (←)
• coluna reversa- direção dos elementos de baixo para cima ()

Controla o encapsulamento de elementos que não cabem no contêiner.

• nowrap (padrão)- os elementos aninhados são organizados em uma linha (com direção=linha) ou em uma coluna (com direção=coluna) independentemente de serem colocados em um contêiner ou não.
• enrolar- inclui a transferência de elementos para a próxima linha se eles não couberem no contêiner. Isso permite o movimento dos elementos ao longo do eixo transversal.
• enrole reverso- o mesmo que enrole apenas o transfer não será para baixo, mas para cima (na direção oposta).

Combina as propriedades flex-direction e flex-wrap. Eles são frequentemente usados ​​juntos, então a propriedade flex-flow foi criada para escrever menos código.

flex-flow pega os valores dessas duas propriedades separadas por um espaço. Ou você pode especificar um único valor para qualquer propriedade.

/* flex-direction somente */ flex-flow: row; fluxo flexível: reverso de linha; fluxo flexível: coluna; fluxo flexível: reverso de coluna; /* flex-wrap somente */ flex-flow: nowrap; fluxo flexível: envoltório; fluxo flexível: wrap-reverse; /* ambos os valores de uma vez: flex-direction e flex-wrap */ flex-flow: row nowrap; fluxo flexível: quebra de coluna; flex-flow: coluna-reverso wrap-reverse; justificar-conteúdo:

Alinha os elementos ao longo do eixo principal: se direção=linha, então horizontalmente, e se direção=coluna, então verticalmente.

• início flexível (padrão)- os elementos irão desde o início (pode haver espaço no final).
• extremidade flexível- os elementos são alinhados no final (o local permanecerá no início)
• Centro- no centro (o local permanecerá à esquerda e à direita)
• espaço entre- elementos extremos são pressionados nas bordas (o espaço entre os elementos é distribuído uniformemente)
• espaço ao redor- o espaço livre é distribuído uniformemente entre os elementos (elementos extremos não são pressionados contra as bordas). O espaço entre a borda do contêiner e os elementos mais externos será metade do espaço entre os elementos no meio da linha.
• espaçar uniformemente

Alinha linhas contendo elementos ao longo do eixo transversal. O mesmo que justificar conteúdo, mas para o eixo oposto.

Nota: Funciona quando há pelo menos 2 linhas, ou seja, se houver apenas 1 linha, nada acontecerá.

Aqueles. se flex-direction: row , essa propriedade alinhará as linhas invisíveis verticalmente ¦ . É importante notar aqui que a altura do bloco deve ser definida de forma rígida e deve ser maior que a altura das linhas, caso contrário as próprias linhas irão esticar o contêiner e qualquer alinhamento delas perde o significado, pois não há espaço livre entre eles... Mas quando flex-direction: column , as linhas se movem horizontalmente → e a largura do contêiner é quase sempre maior que a largura das linhas e o alinhamento das linhas imediatamente faz sentido ...

• esticar (padrão)- as linhas são esticadas para preencher a linha completamente
• início flexível- as linhas são agrupadas na parte superior do contêiner (pode haver espaço no final).
• extremidade flexível- as linhas são agrupadas na parte inferior do contêiner (o local permanecerá no início)
• Centro- as linhas são agrupadas no centro do contêiner (o local permanecerá nas bordas)
• espaço entre- as linhas extremas são pressionadas contra as bordas (o espaço entre as linhas é distribuído uniformemente)
• espaço ao redor- o espaço livre é distribuído uniformemente entre as linhas (os elementos extremos não são pressionados contra as bordas). O espaço entre a borda do contêiner e os elementos mais externos será metade do espaço entre os elementos no meio da linha.
• espaçar uniformemente- o mesmo que space-around , apenas a distância dos elementos extremos às bordas do contêiner é a mesma que entre os elementos.

Alinha os elementos ao longo do eixo transversal dentro de uma linha (linha invisível). Aqueles. as próprias linhas são alinhadas através de align-content , e os elementos dentro dessas linhas (rows) através de align-items e tudo isso ao longo do eixo transversal. Não existe essa separação ao longo do eixo principal, não existe o conceito de linhas e os elementos são alinhados usando justify-content .

• esticar (padrão)- os elementos são esticados para preencher completamente a linha
• início flexível- os elementos são pressionados para o início da linha
• extremidade flexível- os elementos são pressionados até o final da linha
• Centro- os elementos são alinhados no centro da linha
• linha de base- os elementos são alinhados à linha de base do texto

Para elementos de contêiner

Especifica o fator para aumentar o elemento quando houver espaço livre no contêiner. Flex-grow padrão: 0 ou seja nenhum dos elementos deve crescer e preencher o espaço livre no contêiner.

Flex-grow padrão: 0

• Se você especificar flex-grow:1 para todos os elementos, todos eles se estendem da mesma maneira e preenchem todo o espaço livre no contêiner.
• Se você especificar flex-grow:1 para um dos elementos, ele preencherá todo o espaço livre no contêiner e o alinhamento através do justify-content não funcionará mais: não há espaço livre para alinhar...
• Com flex-grow:1. Se um deles tiver flex-grow:2, será 2x maior que todos os outros
• Se todas as caixas flexíveis dentro de um contêiner flexível tiverem flex-grow:3 , elas terão o mesmo tamanho
• Com flex-grow:3 . Se um deles tiver flex-grow:12, será 4 vezes maior que todos os outros

Como funciona? Digamos que o contêiner tenha 500px de largura e contenha dois elementos, cada um com uma largura base de 100px. Portanto, restam 300 pixels livres no contêiner. Agora, se definirmos o primeiro elemento como flex-grow:2; , e o segundo flex-grow: 1; , os blocos ocuparão toda a largura disponível do contêiner e a largura do primeiro bloco será de 300 px e do segundo 200 px. Isso se explica pelo fato de que os 300px de espaço livre disponível no container foram distribuídos entre os elementos na proporção de 2:1, +200px para o primeiro e +100px para o segundo.

Nota: você pode especificar números fracionários no valor, por exemplo: 0.5 - flex-grow:0.5

Especifica o fator de redução para o elemento. A propriedade é o oposto de flex-grow e determina como o elemento deve encolher se não houver espaço livre no contêiner. Aqueles. a propriedade começa a funcionar quando a soma dos tamanhos de todos os elementos é maior que o tamanho do container.

Flex-shrink padrão: 1

Digamos que o contêiner tenha 600px de largura e contenha dois elementos, cada um com 300px de largura - flex-basis:300px; . Aqueles. dois elementos enchem completamente o recipiente. Vamos especificar flex-shrink: 2 para o primeiro elemento; , e o segundo flex-shrink: 1; . Agora vamos reduzir a largura do contêiner em 300px, ou seja, os elementos precisam ser reduzidos em 300px para caber dentro do contêiner. Eles serão comprimidos na proporção de 2:1, ou seja, o primeiro bloco será reduzido em 200px e o segundo em 100px e os novos tamanhos de elemento serão 100px e 200px.

Nota: você pode especificar números fracionários no valor, por exemplo: 0.5 - flex-shrink:0.5

Define a largura base do elemento - a largura antes que quaisquer outras condições que afetem a largura do elemento sejam calculadas. O valor pode ser especificado em px, em, rem, %, vw, vh, etc. A largura final dependerá da largura da base e dos valores de flex-grow, flex-shrink e do conteúdo dentro do bloco. Com auto , o elemento obtém uma largura base em relação ao conteúdo dentro dele.

Padrão: automático

Às vezes é melhor codificar a largura de um elemento usando a propriedade largura familiar. Por exemplo, largura: 50%; significará que o elemento dentro do contêiner será exatamente 50%, no entanto, as propriedades flex-grow e flex-shrink ainda funcionarão. Isso pode ser necessário quando o elemento é esticado pelo conteúdo dentro dele, mais do que o especificado em flex-basis. Exemplo.

flex-basis será "difícil" se esticar e encolher forem definidos como zero: flex-basis:200px; flex-grow:0; flex-shrink:0; . Tudo isso pode ser escrito como flex:0 0 200px; .

Três propriedades abreviadas: flex-grow flex-shrink flex-basis .

Padrão: flexível: 0 1 automático

No entanto, você pode especificar um ou dois valores:

Flex: nenhum; /* 0 0 auto */ /* número */ flex: 2; /* flex-grow (flex-basis vai para 0) */ /* not a number */ flex: 10em; /* flex-base: 10em */ flex: 30px; /* flex-base: 30px */ flex: auto; /* flex-base: auto */ flex: conteúdo; /* flex-base: conteúdo */ flex: 1 30px; /* flex-grow e flex-base */ flex: 2 2; /* flex-grow e flex-shrink (flex-base vai para 0) */ flex: 2 2 10%; /* flex-grow e flex-shrink e flex-basis */ align-self:

Permite alterar a propriedade align-items, apenas para um único elemento.

Padrão: dos itens de alinhamento do contêiner

• esticar- o elemento é esticado para preencher completamente a linha
• início flexível- o elemento é pressionado até o início da linha
• extremidade flexível- o elemento é pressionado até o final da linha
• Centro- o elemento está alinhado ao centro da linha

linha de base- o elemento está alinhado à linha de base do texto

Permite alterar a ordem (posição, posição) de um elemento na linha geral.

Padrão: pedido: 0

Por padrão, os elementos têm ordem: 0 e são colocados na ordem em que aparecem no código HTML e na direção da linha. Mas se você alterar o valor da propriedade order, os elementos serão alinhados na ordem de valores: -1 0 1 2 3 ... . Por exemplo, se você especificar order: 1 para um dos elementos, todos os zeros irão primeiro e, em seguida, o elemento com 1.

Assim, você pode, por exemplo, jogar o primeiro elemento para o final, sem alterar a direção do movimento dos elementos restantes ou do código HTML.

Notas

Como a base flexível é diferente da largura?

Abaixo estão as diferenças importantes entre flex-base e largura/altura:

flex-basis só funciona para o eixo principal. Isso significa que com flex-direction:row flex-basis controla a largura (largura), e com flex-direction:column controla a altura (altura). .

flex-basis aplica-se apenas a itens flexíveis. Isso significa que se você desabilitar o flex no container, esta propriedade não terá efeito.

Elementos de contêiner absolutos não participam de construções flex... Isso significa que flex-basis não afeta elementos flex de contêiner se eles forem absolutos position:absolute . Eles precisarão especificar uma largura/altura.

• Ao usar a propriedade flex 3, os valores (flex-grow/flex-shrink/flex-basis) podem ser combinados e escritos curtos, enquanto para largura aumentar ou encolher devem ser escritos separadamente. Por exemplo: flex:0 0 50% == largura:50%; flex-shrink:0; . Às vezes é apenas inconveniente.

Se possível, ainda prefira flex-base . Use largura apenas quando a base flexível não se encaixar.

A diferença entre base flexível e largura é um bug ou um recurso?

O conteúdo dentro de um elemento flex o expande e não pode ir além dele. No entanto, se você definir a largura por largura ou max-width em vez de flex-basis , o elemento dentro do contêiner flex poderá sair desse contêiner (às vezes, esse comportamento é necessário). Exemplo:

Exemplos de layout flexível

Nos exemplos, os prefixos para compatibilidade entre navegadores não são usados ​​em nenhum lugar. Eu fiz isso para facilitar a leitura de css. Portanto, consulte as versões mais recentes do Chrome ou Firefox para obter exemplos.

#1 Exemplo simples de alinhamento vertical e horizontal

Vamos começar com o exemplo mais simples - alinhamento vertical e horizontal ao mesmo tempo e em qualquer altura de bloco, até borracha.

Ou assim, sem o bloco dentro:

#1.2 Separação (espaço) entre os elementos do bloco flexível

Para posicionar os elementos do contêiner nas bordas e selecionar arbitrariamente o elemento após o qual haverá uma lacuna, você precisa usar a propriedade margin-left:auto ou margin-right:auto.

#2 Menu responsivo no flex

Vamos fazer um menu no topo da página. Em uma tela ampla, deve estar à direita. Em média, alinhe no meio. E em um pequeno, cada elemento deve estar em uma nova linha.

Nº 3 Responsivo 3 colunas

Este exemplo mostra como fazer 3 colunas de forma rápida e conveniente, que, quando reduzidas, se transformarão em 2 e depois em 1.

Observe que isso pode ser feito sem usar regras de mídia, tudo está no flex.

Vá para jsfiddle.net e altere a largura da seção "resultado"

#4 Blocos responsivos no flex

Digamos que precisamos exibir 3 blocos, um grande e dois pequenos. Ao mesmo tempo, é necessário que os blocos se adaptem a telas pequenas. Nós fazemos:

Vá para jsfiddle.net e altere a largura da seção "resultado"

#5 Galeria sobre flexibilidade e transição

Este exemplo mostra a rapidez com que você pode fazer um belo acordeão com fotos no flex. Observe a propriedade de transição para flex.

#6 Flex to Flex (apenas um exemplo)

A tarefa é fazer um bloco flexível. Para que o início do texto em cada bloco fique na mesma linha horizontal. Aqueles. à medida que a largura diminui, os blocos crescem em altura. Preciso que a imagem fique na parte superior, o botão sempre na parte inferior e o texto no meio comece em uma única linha horizontal...

Para resolver este problema, os próprios blocos são esticados por flex e a largura máxima possível é definida para eles. Cada bloco interno também é uma construção flex, com o flex-direction:column girado; e o elemento no meio (onde está o texto) é esticado por flex-grow:1; para preencher todo o espaço livre, para que o resultado seja alcançado - o texto começou com uma linha ...

Mais exemplos

Suporte ao navegador - 98,3%

Claro, não há suporte completo, mas todos os navegadores modernos suportam construções flexbox. Alguns ainda requerem prefixos. Para uma imagem real, vamos dar uma olhada em caniuse.com e ver que 96,3% dos navegadores em uso hoje funcionarão sem prefixos, com 98,3% de prefixos. Este é um ótimo indicador para usar o flexbox com ousadia.

Para saber quais prefixos são relevantes hoje (junho de 2019), darei um exemplo de todas as regras flexíveis com prefixos necessários:

/* Container */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:coluna; flex-direction:coluna; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms -flex-flow:column wrap; flex-flow:column wrap; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; -ms-flex-line-pack: distribua; align-content:space-around; ) /* Itens */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex- negativo:2; flex-shrink:2; -ms-flex-preferred-size:100px; flex-basis:100px; -ms-flex:1 2 100px; flex:1 2 100px; -ms-flex-item-align :center; align-self:center; -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; )

É melhor que as propriedades com prefixos venham antes da propriedade original.
Não há prefixos desnecessários para hoje (de acordo com caniuse) nesta lista, mas em geral há mais prefixos.

• (novo) - nova sintaxe: display: flex; .
• (interpolação) - antiga sintaxe não oficial de 2011: display: flexbox; .
• (antigo) - sintaxe antiga de 2009: display: box;

Vídeo

Bem, não se esqueça do vídeo, às vezes também é interessante e compreensível. Aqui estão alguns populares:

Links flexíveis úteis

flexboxfroggy.com - jogo de aprendizagem flexbox.

Flexplorer é um construtor de código flex visual.

Sobre como é fácil trabalhar com o Flexbox no exemplo de layout de um template de site de notícias.

Acredite, não há necessidade de entrar em todos os detalhes do trabalho com o Flexbox se você quiser começar a usá-lo agora. Neste tutorial, o autor apresentará alguns dos recursos do Flexbox e criará um "layout de notícias" semelhante ao que você pode ter visto no site do The Guardian.

A razão pela qual o autor usa o Flexbox é devido às muitas possibilidades que ele oferece:
- facilidade de criação de colunas adaptáveis;
- criar colunas da mesma altura;
- a capacidade de empurrar o conteúdo para o fundo do recipiente.

Vamos lá!

1. Comece criando duas colunas

Por sua vez, o Flexbox simplifica esse processo com uma série de vantagens como:

Escrevendo um código mais limpo: tudo o que precisamos fazer é criar um contêiner com uma regra exibição: flexível;
- flexibilidade: podemos redimensionar, esticar e alinhar colunas alterando algumas linhas de CSS;
- marcação semântica;
- além disso, com o uso do Flexbox, não há necessidade de cancelar o wrapper para evitar um comportamento imprevisível do layout.

Vamos começar criando duas colunas, uma que ocupará 2/3 da largura do nosso contêiner e outra que ocupará 1/3 dela.

Recipiente colunas;
- dois elementos filhos coluna, um dos quais tem uma classe adicional coluna principal, que usaremos posteriormente para tornar a coluna mais larga.

Colunas ( display: flex; ) .column ( flex: 1; ) .main-column ( flex: 2; )
Porque o coluna principal tem um valor flexível igual a 2 , essa coluna ocupará duas vezes mais espaço que a segunda.

Vamos adicionar um pouco de design visual e, como resultado, temos:

Clique para ver em ação

2. Faça de cada coluna um contêiner flexbox

Então, precisamos de artigos para:

Dispostos verticalmente dentro de uma coluna de contêiner;
- ocupou todo o espaço disponível.

regra direção flexível: coluna especificado para o contêiner, juntamente com a regra Flexão: 1 especificado para o elemento filho permite que o artigo preencha todo o espaço livre verticalmente, mantendo a altura das duas primeiras colunas inalteradas.

Clique para ver em ação

3. Fazendo um recipiente a partir de um artigo

título;
- parágrafo;
- um painel informativo com o nome do autor e o número de comentários;
- alguma imagem adaptável.

Aqui estamos usando o Flexbox para empurrar a barra de informações para a parte inferior do elemento. Aqui, veja o resultado que esperamos obter.

E aqui está o código em si:

Também aplicamos a propriedade Flexão: 1 para elemento artigo-conteúdo, esticando-o para todo o espaço livre e pressionando informações do artigo ao fundo. A altura da coluna não importa neste caso.

Clique para ver em ação

4. Adicionando várias colunas aninhadas

Coluna aninhada ( flex: 2; )
Esta coluna agora terá o dobro da largura da segunda.

Clique para ver em ação

5. Fazendo o primeiro artigo com layout horizontal

Primeiro artigo ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image ( altura: 300px; ordem: 2; preenchimento-topo: 0; largura: 400px; )
Propriedade ordem desempenha um grande papel neste caso, porque permite alterar a ordem dos elementos HTML sem alterar a marcação HTML. Na realidade, imagem do artigo no código vem antes do elemento corpo do artigo, mas se comporta como se estivesse atrás dele.

Clique para ver em ação

6. Fazendo um layout adaptável

Uma das grandes coisas sobre o Flexbox é que você pode simplesmente remover a regra exibição: flexível no container para desativá-lo completamente (Flexbox), enquanto o restante de suas propriedades (como itens de alinhamento ou flexionar) permanecerá operacional.

Como resultado, podemos ativar o layout responsivo ativando o Flexbox somente quando necessário.

Então vamos remover exibição: flexível de seletores .colunas e .coluna, em vez de "empacotar" em uma consulta de mídia:

@media screen e (min-width: 800px) ( .columns, .column ( display: flex; ) )
Isso é tudo! Em telas com resolução pequena, todos os artigos estarão localizados um acima do outro e em telas com resolução superior a 800 pixels - em duas colunas.

7. Adicionando os toques finais

@media screen e (min-width: 1000px) ( .first-article ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image ( height: 300px ; ordem: 2; preenchimento superior: 0; largura: 400px; ) .main-column ( flex: 3; ) .nested-column ( flex: 2; ) )
O conteúdo do primeiro artigo é alinhado horizontalmente com o texto do lado esquerdo e a imagem do lado direito. Além disso, a coluna principal agora é mais larga (75%). O mesmo vale para a coluna aninhada (66%).

E aqui está o resultado final!

Clique para ver em ação

Conclusão

Sobre como é fácil trabalhar com o Flexbox no exemplo de layout de um template de site de notícias.

Acredite, não há necessidade de entrar em todos os detalhes do trabalho com o Flexbox se você quiser começar a usá-lo agora. Neste tutorial, o autor apresentará alguns dos recursos do Flexbox e criará um "layout de notícias" semelhante ao que você pode ter visto no site do The Guardian.

A razão pela qual o autor usa o Flexbox é devido às muitas possibilidades que ele oferece:
- facilidade de criação de colunas adaptáveis;
- criar colunas da mesma altura;
- a capacidade de empurrar o conteúdo para o fundo do recipiente.

Vamos lá!

1. Comece criando duas colunas

Por sua vez, o Flexbox simplifica esse processo com uma série de vantagens como:

Escrevendo um código mais limpo: tudo o que precisamos fazer é criar um contêiner com uma regra exibição: flexível;
- flexibilidade: podemos redimensionar, esticar e alinhar colunas alterando algumas linhas de CSS;
- marcação semântica;
- além disso, com o uso do Flexbox, não há necessidade de cancelar o wrapper para evitar um comportamento imprevisível do layout.

Vamos começar criando duas colunas, uma que ocupará 2/3 da largura do nosso contêiner e outra que ocupará 1/3 dela.

Recipiente colunas;
- dois elementos filhos coluna, um dos quais tem uma classe adicional coluna principal, que usaremos posteriormente para tornar a coluna mais larga.

Colunas ( display: flex; ) .column ( flex: 1; ) .main-column ( flex: 2; )
Porque o coluna principal tem um valor flexível igual a 2 , essa coluna ocupará duas vezes mais espaço que a segunda.

Vamos adicionar um pouco de design visual e, como resultado, temos:

Clique para ver em ação

2. Faça de cada coluna um contêiner flexbox

Então, precisamos de artigos para:

Dispostos verticalmente dentro de uma coluna de contêiner;
- ocupou todo o espaço disponível.

regra direção flexível: coluna especificado para o contêiner, juntamente com a regra Flexão: 1 especificado para o elemento filho permite que o artigo preencha todo o espaço livre verticalmente, mantendo a altura das duas primeiras colunas inalteradas.

Clique para ver em ação

3. Fazendo um recipiente a partir de um artigo

título;
- parágrafo;
- um painel informativo com o nome do autor e o número de comentários;
- alguma imagem adaptável.

Aqui estamos usando o Flexbox para empurrar a barra de informações para a parte inferior do elemento. Aqui, veja o resultado que esperamos obter.

E aqui está o código em si:

Também aplicamos a propriedade Flexão: 1 para elemento artigo-conteúdo, esticando-o para todo o espaço livre e pressionando informações do artigo ao fundo. A altura da coluna não importa neste caso.

Clique para ver em ação

4. Adicionando várias colunas aninhadas

Coluna aninhada ( flex: 2; )
Esta coluna agora terá o dobro da largura da segunda.

Clique para ver em ação

5. Fazendo o primeiro artigo com layout horizontal

Primeiro artigo ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image ( altura: 300px; ordem: 2; preenchimento-topo: 0; largura: 400px; )
Propriedade ordem desempenha um grande papel neste caso, porque permite alterar a ordem dos elementos HTML sem alterar a marcação HTML. Na realidade, imagem do artigo no código vem antes do elemento corpo do artigo, mas se comporta como se estivesse atrás dele.

Clique para ver em ação

6. Fazendo um layout adaptável

Uma das grandes coisas sobre o Flexbox é que você pode simplesmente remover a regra exibição: flexível no container para desativá-lo completamente (Flexbox), enquanto o restante de suas propriedades (como itens de alinhamento ou flexionar) permanecerá operacional.

Como resultado, podemos ativar o layout responsivo ativando o Flexbox somente quando necessário.

Então vamos remover exibição: flexível de seletores .colunas e .coluna, em vez de "empacotar" em uma consulta de mídia:

@media screen e (min-width: 800px) ( .columns, .column ( display: flex; ) )
Isso é tudo! Em telas com resolução pequena, todos os artigos estarão localizados um acima do outro e em telas com resolução superior a 800 pixels - em duas colunas.

7. Adicionando os toques finais

@media screen e (min-width: 1000px) ( .first-article ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image ( height: 300px ; ordem: 2; preenchimento superior: 0; largura: 400px; ) .main-column ( flex: 3; ) .nested-column ( flex: 2; ) )
O conteúdo do primeiro artigo é alinhado horizontalmente com o texto do lado esquerdo e a imagem do lado direito. Além disso, a coluna principal agora é mais larga (75%). O mesmo vale para a coluna aninhada (66%).

E aqui está o resultado final!

Clique para ver em ação

Conclusão

Oi habr!

Numa bela noite, que não prenunciava nada de interessante, nosso bate-papo recebeu uma proposta do autor da publicação, escrita por ele na primavera de 2012, para escrever um artigo de remake, mas usando FlexBox e uma explicação complementar sobre o que e como funciona. Depois de uma certa dose de dúvidas, o interesse em entender a especificação mais profundamente ainda venceu, e sentei-me seguramente para compor esses mesmos exemplos. No decorrer da imersão nessa área, muitas nuances começaram a surgir, o que se transformou em algo mais do que apenas inversão de 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. Todos os que estão interessados, convido-vos a habrakat.

O que eu gostaria de chamar a atenção, para layout de layout no FlexBox, o desenvolvedor precisará de algum grau de adaptação. Pelo meu próprio exemplo, senti que muitos anos de experiência fazem uma piada cruel. O FlexBox requer uma ideia um pouco diferente de como os elementos são organizados em um fluxo.

Parte técnica

Então. Existem dois tipos principais de itens 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 cercam o container, como display: block; e display: inline-block;, respectivamente.

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

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

Por padrão, todos os itens flexíveis em um contêiner cabem em uma linha, mesmo que não caibam no contêiner, eles vão além dos limites do contêiner. Esse comportamento é alternado usando a propriedade envoltório flexível. Esta propriedade tem três estados:
agora rap(padrão): Os itens flexíveis são alinhados 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.
enrole reverso: o mesmo que wrap, mas envolve de baixo para cima.
Vamos ver um exemplo.

Para maior comodidade, há 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:

Elementos em um contêiner podem ser alinhados usando uma propriedade justificar-conteúdo ao longo do eixo principal. Esta propriedade aceita até cinco valores diferentes.
início flexível(padrão): os itens 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 se encaixam perfeitamente nas bordas do contêiner e o espaço livre é distribuído uniformemente entre os elementos.
espaço ao redor: os itens flexíveis são alinhados para que o espaço livre seja distribuído uniformemente entre os itens. Mas vale a pena notar que o espaço entre a borda do contêiner e os elementos extremos será 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 cruzado. Ao aplicar a propriedade itens de alinhamento, que também aceita 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 pressionados até o início da linha
extremidade flexível: os elementos são pressionados até o final da linha
Centro: os elementos são alinhados ao centro da linha
linha de base: Os elementos se alinham com a linha de base do texto
esticar(padrão): Os elementos são esticados para preencher toda a linha.

Outra propriedade semelhante à anterior é alinhar conteúdo. Ele sozinho é responsável por alinhar linhas inteiras em relação ao contêiner flex. Não terá efeito se os itens flexíveis estiverem na mesma linha. A propriedade assume seis valores diferentes.
início flexível: todas as linhas são pressionadas no início do eixo cruzado
extremidade flexível: todas as linhas são pressionadas até o final do eixo transversal
Centro: Todas as linhas em um pacote são alinhadas ao centro do eixo cruzado
espaço entre: as linhas são distribuídas da borda superior para a parte inferior, deixando espaço livre entre as linhas, enquanto as linhas extremas são pressionadas contra as bordas do contêiner.
espaço ao redor: as linhas são distribuídas uniformemente pelo contêiner.
esticar(padrão): As linhas são esticadas para preencher o espaço disponível.
Você pode tentar como align-items e align-content funcionam neste exemplo. Eu apresentei especificamente essas duas propriedades em um exemplo, uma vez que elas interagem de forma bastante próxima, cada uma executando sua tarefa. Observe o que acontece quando os elementos são colocados em uma linha e em várias linhas.

Descobrimos os parâmetros do contêiner flexível, resta lidar com as propriedades dos elementos flexíveis.
A primeira propriedade a que seremos apresentados é ordem. Esta propriedade permite alterar a posição no fluxo de um elemento específico. 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 mudam de lugar 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 flex-grow e flex-shrink, sobre o qual falarei um pouco mais adiante. Aceita um valor de largura em px, %, em e outras unidades. Não é estritamente a largura do item flexível, é uma espécie de ponto de partida. Relativo ao qual o elemento é esticado ou encolhe. No modo automático, o elemento obtém uma largura base em relação ao conteúdo dentro dele.

flex-grow em vários recursos tem uma descrição completamente incorreta. Ele diz que supostamente define a proporção dos tamanhos dos elementos no contêiner. Na verdade não é. Esta propriedade especifica um fator para aumentar o elemento quando há espaço livre no container. O valor padrão para esta propriedade é 0. Vamos imaginar que temos um contêiner flexível com 500px de largura, dentro do qual existem dois itens flexíveis, cada um com uma largura base de 100px. Isso deixa mais 300px de espaço livre no contêiner. Se o primeiro elemento receber flex-grow: 2; e o segundo elemento receber 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 200px. O que aconteceu? O que aconteceu é que os 300px de espaço livre disponível 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-shrink. O valor padrão é 1. Também define o fator para alterar a largura dos elementos, apenas na direção oposta. Se o recipiente for largo menos do que a soma das larguras de base dos elementos, essa propriedade entra em vigor. Por exemplo, o contêiner tem uma largura de 600px e os elementos flex-basis têm 300px cada. 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 o contêiner. Essa diferença é distribuída em uma proporção de 2:1, acontece que subtraímos 200px do primeiro bloco e 100px do segundo. O novo tamanho do elemento é 100px e 200px para o primeiro e segundo elemento, respectivamente. Se definirmos flex-shrink como 0, evitaremos que o elemento encolha para menos que sua largura base.

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

Todas as três propriedades podem ser escritas de forma abreviada usando a expressão flexionar. Se parece com isso:
flexionar: ;
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 de itens flexíveis é alinhar-se. Tudo é simples aqui, é o mesmo que align-items para o contêiner, permitindo que você substitua o alinhamento de um elemento específico.

Todos cansados! Vamos exemplos!

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

Html ( background: #ccc; min-height: 100%; font-family: sans-serif; display: -webkit-flex; display: flex; flex-direction: column; ) body ( margin: 0; padding: 0 15px ; display: -webkit-flex; display: flex; flex-direction: coluna; flex: auto; ) .header ( largura: 100%; max-width: 960px; min-width: 430px; margin: 0 auto 30px; preenchimento : 30px 0 10px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: espaço entre; box-sizing: border-box; ) .main ( largura: 100%; max-width .footer ( plano de fundo: #222; largura: 100%; largura máxima: 960px; largura mínima: 430px; cor: #eee; margem: automático; preenchimento: 15px; tamanho da caixa: caixa de borda; )

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

Agora vamos colocar o logotipo e o menu no cabeçalho.
.logo ( font-size: 0; margin: -10px 10px 10px 0; display: flex; flex: none; align-items: center; ) .logo:before, .logo:after ( content: ""; display: block ; ) .logo:before ( background: #222; width: 50px; height: 50px; margin: 0 10px 0 20px; border-radius: 50%; ) .logo:after ( background: #222; width: 90px; height : 30px; ) .nav ( margin: -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; cor: #eee; decoração de texto: nenhuma; margem: 5px 0 0 5px; display: -webkit-flex; display: flex; justificar-content: center; align-items: center; )

Como o cabeçalho está definido como 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 deslocará elegantemente sob o logotipo.

Em seguida, vemos um grande post ou banner, acho difícil dizer o que é especificamente, mas também não é o ponto. Temos uma imagem à direita e um texto com um título à esquerda. Eu pessoalmente aderi à ideia de que qualquer elemento deve ser o mais flexível possível, independentemente de ser um layout adaptativo ou estático. Então temos uma barra lateral neste post em que a imagem está colocada, a rigor, não podemos dizer exatamente qual a largura que precisamos, pois hoje temos uma imagem grande, amanhã uma pequena, e cada vez relutamos em refazer o elemento do princípio. Então, precisamos que a barra lateral ocupe o lugar que ela precisa, e o resto do lugar vai para o conteúdo. Vamos fazer isso:

Box ( font-size: 1.25rem; line-height: 1.5; font-style: itálico; margin: 0 0 40px -50px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; ) .box-base ( margin-left: 50px; flex: 1 0 430px; ) .box-side ( margin-left: 50px; flex: none; ) .box-img ( max-width: 100%; height : automático; )

Como você pode ver para .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-shrink: 0;. Com essa manipulação, dissemos que o conteúdo não pode ter menos de 430px de largura. E tendo em vista que para .box eu especifico flex-wrap: embrulhar; no momento em que a barra lateral e o conteúdo não forem colocados no container.box, a barra lateral cairá automaticamente sob o conteúdo. E tudo isso sem usar @ meios de comunicação! Eu acho muito legal.

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

O contêiner tem 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; )

Eu defino as colunas para uma largura de base de 200px para que as colunas não fiquem muito estreitas, é melhor se elas forem transferidas umas para as outras conforme necessário.

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

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

Vemos como as postagens de resolução de desktop são construídas em uma grade de três seguidas. Quando a largura da janela de visualização é menor que 800px, a grade se transforma em uma coluna com postagens, onde a foto da postagem se alinha alternadamente nos lados esquerdo e direito do conteúdo da postagem. E se a largura for menor que 600px, a foto da postagem ficará totalmente oculta.
.grid ( display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: espaço entre; ) .grid-itm ( margin-bottom: 30px; flex-basis: calc(33.33% - 30px * 2/3); display: -webkit-flex; display: flex; flex-wrap: wrap; ) .grid-img ( margin: 0 auto 20px; flex: 0 1 80%; ) .grid-cont( flex: 0 1 100%; ) .grid-title ( text-align: center; ) @media screen e (max-width: 800px) ( .grid-itm ( flex-wrap: nowrap; flex-basis: 100%; ) . grid-img ( flex: 0 0 auto; ) .grid-itm:nth-child(even) .grid-img ( margin: 0 0 0 30px; order: 2; ) .grid-itm:nth-child(odd) .grid-img ( margin: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title ( text-align: left; ) ) @media screen and (max-width: 600px) ( .grid-img ( display: nenhum; ) )

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

Contente:

Flexboxé uma nova maneira de organizar blocos em uma página. Esta é uma tecnologia criada especificamente para o layout de elementos, ao contrário de floats. Usando Flexbox você pode facilmente alinhar elementos horizontal e verticalmente, alterar a direção e a ordem de exibição dos elementos, esticar blocos até a altura total do pai ou pregá-los na borda inferior.

UPD de 02.02.2017: fez uma útil folha de dicas do 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 da redação deste artigo, eles são exibidos mais corretamente em cromada. No Firefox eles funcionam parcialmente, no Safari eles não funcionam.

De acordo com caniuse.com, Flexbox não suportado pelo IE 8 e 9 e Opera Mini, e outros navegadores não suportam todas as propriedades e/ou requerem prefixos.

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

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

Além disso, lembre-se de que, ao usar Flexbox float , clear e vertical-align não funcionam para blocos internos, bem como propriedades que definem colunas no texto.

Vamos preparar um site de teste para experimentos:

Um bloco pai (amarelo) e 5 filhos.

Exibição: flexível

E agora ao elemento pai adicionamos display: flex; . As divs internas se alinham (ao longo do eixo principal) com colunas da mesma altura, independentemente do conteúdo.

exibição: flexível; torna todos os elementos filhos fluidos - flex , e não inline ou block, como era originalmente.

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

propriedade de exibição para Flexbox pode assumir dois valores:

flex - se comporta como um elemento de bloco. Ao calcular a largura dos blocos, o layout tem prioridade (se a largura dos blocos for insuficiente, o conteúdo pode sair das bordas).

inline-flex - se comporta como inline-block. Prioridade no conteúdo (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 na qual os blocos são dispostos é controlada pela propriedade flex-direction.

Valores possíveis:

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

linha e linha inversa

coluna e coluna-reverso

Envoltório flexível

Uma linha pode ter muitos blocos. Se eles quebram ou não é determinado pela propriedade flex-wrap.

Valores possíveis:

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

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

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

fluxo flexível: coluna; fluxo flexível: wrap-reverse; flex-flow: quebra de coluna inversa;

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

ordem

A propriedade order é usada para controlar a ordem dos blocos.

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

justificar-conteúdo

Existem várias propriedades para alinhar itens: justify-content , align-items e align-self .

justificar-content e align-items são aplicados ao contêiner pai, align-self aos filhos.

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

Valores possíveis para justificar-conteúdo:

flex-start - os itens 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; center - os elementos são alinhados ao centro do eixo principal; space-between - 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 espaço livre ao redor deles.

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.

Valores possíveis para align-items:

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

flex-start, flex-end

linha de base, esticar

Alinhar-se

align-self também é responsável por alinhar ao longo do eixo perpendicular, mas é definido em itens flexíveis individuais.

Valores possíveis para align-self:

auto é o valor padrão. Indica que o elemento usa align-items do elemento pai; flex-start - o elemento é alinhado a partir do início do eixo perpendicular; flex-end - o elemento é alinhado a partir do final do eixo perpendicular; center - o elemento é centralizado; linha de base - o elemento é alinhado à linha de base; esticar - o elemento é esticado, ocupando todo o espaço em altura.

Alinhar conteúdo

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

Valores possíveis:

flex-start - os itens são alinhados desde o início do eixo principal; flex-end - os elementos são alinhados a partir do final do eixo principal; center - os elementos são alinhados ao centro do eixo principal; space-between - 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 espaço livre ao redor deles; esticar - os elementos são esticados para preencher toda a altura (valor padrão).

flex-start, flex-end

centro, esticar

espaço-entre , espaço-ao redor

Obs: Algumas coisas eu nunca consegui ver em ação, por exemplo, a linha flex-flow: column wrap ou o registro completo da mesma flex-direction: column; flex-wrap: embrulhar; .

Os elementos são empilhados, mas não agrupados:

Wrap não funciona com flex-direction: column; , embora na especificação fique assim:

Acho que vai funcionar com o tempo.

UPD de 21/06/2014: Tudo funciona se você der uma altura ao bloco. Obrigado pela dica