CSS Flex Responsivo
Flexbox Responsivo
Você aprendeu no capítulo CSS Media Queries que pode usar media queries para criar diferentes layouts para diferentes tamanhos de tela e dispositivos.
Notebooks e Desktops:
Celulares e :
Por exemplo, se você deseja criar um layout de duas colunas para a maioria dos tamanhos de tela e um layout de uma coluna para tamanhos de tela pequenos (como telefones e tablets), você pode alterar flex-directionde rowpara column
em um ponto de interrupção específico (800px no exemplo abaixo):
Exemplo
.flex-container {
display: flex;
flex-direction: row;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}
Outra maneira é alterar a porcentagem da flexpropriedade dos itens flexíveis para criar layouts diferentes para diferentes tamanhos de tela. Observe que também temos que incluir flex-wrap: wrap;no contêiner flex para que este exemplo funcione:
Exemplo
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Responsive layout - makes a one column layout instead of a two-column
layout */
@media (max-width: 800px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
}
}
Galeria de imagens responsiva usando Flexbox
Use o flexbox para criar uma galeria de imagens responsiva que varia entre quatro, duas ou imagens de largura total, dependendo do tamanho da tela:
Site responsivo com Flexbox
Use o flexbox para criar um site responsivo, contendo uma barra de navegação flexível e conteúdo flexível: