Esse é um layout comum para sites de marketing, por exemplo, que podem ter uma linha de três itens, geralmente com uma imagem, um título e um texto que descreve algumas características de um produto. Em telas menores, é melhor que eles fiquem empilhados e se expandam à medida que o tamanho da tela aumenta.
Ao usar o flexbox para esse efeito, você não vai precisar de consultas de mídia para ajustar a posição desses elementos quando a tela for redimensionada.
A abreviação flex significa: flex: <flex-grow> <flex-shrink> <flex-basis>
.
flex-grow
Alongamento
Se você quiser que as caixas se estiquem e preencham o espaço à medida que são transferidas para a próxima linha, defina o valor de <flex-grow>
como 1, por exemplo:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Agora, ao aumentar ou diminuir o tamanho da tela, esses itens flexíveis diminuem e aumentam.
Sem alongamento
Se você quiser que as caixas sejam preenchidas com o tamanho <flex-basis>
, encolhidas em tamanhos menores, mas não se estiquem para preencher qualquer espaço adicional, escreva: flex: 0 1 <flex-basis>
. Nesse caso, o <flex-basis>
é de 150 px:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}