Flex
Nessa aula vamos ver uma introdução de como posicionar elementos usando o CSS Flexbox
Flexbox
- Nos permite posicionar os elementos dentro da caixa
- Controle em uma dimensão (horizontal ou vertical)
- Alinhamento, direcionamento, ordenar e tamanhos
div.parent { display: flex; }
Flex-direction
- Qual a direção do flex: horizontal ou vertical
- row | column
Alinhamento
- justify-content
- align-items
HTML
<div class="container"> <div class="box blue"></div> <div class="box red"></div> <div class="box green"></div> </div>
CSS
.container { display: flex; justify-content: space-between; } .box { width: 50px; height: 50px; margin-bottom: 8px; } .blue { background-color: blue; } .red { background-color: red; } .green { background-color: green; }
Links úteis
Discord
O grupo é um dos pilares do nosso método e impulsiona tanto o desenvolvimento de habilidades técnicas e comportamentais, quanto a carreira através de conexões profissionais.
Plataforma
Nossa plataforma de aprendizado contínuo reúne todos os nossos programas completos e é a casa dos eventos gratuitos da Rocketseat.