CSS Flexbox
1
2
3
4
5
6
7
8
Módulo de layout CSS Flexbox
Antes do módulo Flexbox Layout, havia quatro modos de layout:
- Bloquear, para seções em uma página da web
- Em linha, para texto
- Tabela, para dados de tabela bidimensionais
- Posicionado, para posição explícita de um elemento
O Módulo de Layout de Caixa Flexível, torna mais fácil projetar uma estrutura de layout responsiva flexível sem usar flutuação ou posicionamento.
Suporte ao navegador
As propriedades do flexbox são suportadas em todos os navegadores modernos.
29.0 | 11.0 | 22.0 | 10 | 48 |
Elementos do Flexbox
Para começar a usar o modelo Flexbox, você precisa primeiro definir um contêiner flex.
1
2
3
O elemento acima representa um contêiner flexível (a área azul) com três itens flexíveis.
Exemplo
Um contêiner flexível com três itens flexíveis:
<div
class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Você aprenderá mais sobre contêineres flexíveis e itens flexíveis nos próximos capítulos.