Layout de caixa flexível
Com o advento da CSS Flexible Box , muitos dos pesadelos 1 dos web designers foram resolvidos. Um dos mais hacky, o alinhamento vertical. Agora é possível mesmo em alturas desconhecidas .
"Duas décadas de hacks de layout estão chegando ao fim. Talvez não amanhã, mas em breve e pelo resto de nossas vidas."
- CSS Lendário Eric Meyer no W3Conf 2013
O Flexible Box (ou, em resumo, Flexbox), é um novo sistema de layout projetado especificamente para fins de layout. A especificação afirma :
O layout do Flex é superficialmente semelhante ao layout do bloco. Faltam muitas das propriedades mais complexas centradas em texto ou documento que podem ser usadas no layout de blocos, como flutuadores e colunas. Em troca, ele obtém ferramentas simples e poderosas para distribuir espaço e alinhar conteúdo das maneiras que os aplicativos da web e as páginas complexas geralmente precisam.
Como isso pode ajudar nesse caso? Bem vamos ver.
Colunas alinhadas verticais
Usando o Twitter Bootstrap, temos .rowalguns .col-*s. Tudo o que precisamos fazer é exibir os .row2 desejados como uma caixa de contêiner flexível e, em seguida, alinhar todos os seus itens flexíveis (as colunas) verticalmente por align-itemspropriedade.
EXEMPLO AQUI (Por favor, leia os comentários com cuidado)
<div class="container">
<div class="row vertical-align"> <!--
^-- Additional class -->
<div class="col-xs-6"> ... </div>
<div class="col-xs-6"> ... </div>
</div>
</div>
.vertical-align {
display: flex;
align-items: center;
}
A saída
A área colorida exibe a caixa de preenchimento das colunas.
Esclarecendo sobre align-items: center
8.3 Alinhamento de eixo transversal: a align-itemspropriedade
Os itens flexíveis podem ser alinhados no eixo transversal da linha atual do contêiner flexível, semelhante, justify-contentmas na direção perpendicular. align-itemsdefine o alinhamento padrão para todos os itens do contêiner flexível, incluindo itens flexíveis anônimos .
align-items: center;
Por valor central, a caixa de margem do item flexível é centralizada no eixo transversal dentro da linha.
Big Alert
Nota importante # 1: O Twitter Bootstrap não especifica as widthcolunas em dispositivos extras pequenos, a menos que você dê uma das .col-xs-#classes às colunas.
Portanto, nesta demonstração em particular, usei .col-xs-*classes para que as colunas sejam exibidas corretamente no modo móvel, porque especifica owidth explicitamente a coluna.
Mas como alternativa, você pode desativar o layout do Flexbox simplesmente mudando display: flex;para display: block;tamanhos de tela específicos. Por exemplo:
/* Extra small devices (767px and down) */
@media (max-width: 767px) {
.row.vertical-align {
display: block; /* Turn off the flexible box layout */
}
}
Ou você pode especificar .vertical-align apenas em tamanhos de tela específicos como:
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
.row.vertical-align {
display: flex;
align-items: center;
}
}
Nesse caso, eu seguiria a abordagem de @KevinNelson .
Nota importante # 2: prefixos de fornecedores omitidos devido à brevidade. A sintaxe do Flexbox foi alterada ao longo do tempo. A nova sintaxe escrita não funcionará em versões mais antigas de navegadores da Web (mas não tão antigas quanto o Internet Explorer 9! Flexbox é suportada no Internet Explorer 10 e posterior).
Isso significa que você também deve usar propriedades prefixadas pelo fornecedor, como display: -webkit-box assim por diante, no modo de produção.
Se você clicar em "Alternar exibição compilada" na demonstração , verá a versão prefixada das declarações CSS (graças ao Autoprefixer ).
Colunas de altura total com conteúdo alinhado vertical
Como você vê na demonstração anterior , as colunas (os itens flexíveis) não são mais tão altas quanto o contêiner (a caixa do contêiner flexível)..row elemento).
Isso ocorre devido ao uso de centervalor para align-itemspropriedade. O valor padrão é stretchpara que os itens possam preencher toda a altura do elemento pai.
Para corrigir isso, você também pode adicionar display: flex;às colunas:
EXEMPLO AQUI (Mais uma vez, observe os comentários)
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center; /* Align the flex-items vertically */
justify-content: center; /* Optional, to align inner flex-items
horizontally within the column */
}
A saída
A área colorida exibe a caixa de preenchimento das colunas.
Por último, mas não menos importante , observe que as demos e os trechos de código aqui têm como objetivo fornecer uma idéia diferente, fornecer uma abordagem moderna para atingir a meta. Observe a seção " Big Alert " se você usar essa abordagem em sites ou aplicativos do mundo real.
Para leitura adicional, incluindo suporte ao navegador, esses recursos seriam úteis:
1. Alinhe verticalmente uma imagem dentro de uma div com a altura de resposta
2. É melhor usar uma classe adicional para não alterar o padrão do Twitter Bootstrap .row.
div, sem o texto do interior, algo como isto jsfiddle.net/corinem/Aj9H9 mas neste exemplo, eu não uso de bootstrap