Público-Alvo: Iniciantes em CSS
O CSS Flexbox é uma poderosa ferramenta que permite criar layouts flexíveis e responsivos em páginas web. Neste artigo, vamos explorar os conceitos básicos do Flexbox e como utilizá-lo para criar designs modernos e adaptáveis.
Exemplos:

Exemplo 1: Criando um layout simples de colunas

<div class="container">

  <div class="column">Coluna 1</div>

  <div class="column">Coluna 2</div>

  <div class="column">Coluna 3</div>

</div>

.container {

  display: flex;

}



.column {

  flex: 1;

  padding: 10px;

  background-color: lightgray;

}

Neste exemplo, definimos um container com a propriedade display: flex, o que faz com que seus elementos filhos sejam organizados em uma linha. Cada coluna possui a classe .column e utiliza a propriedade flex: 1 para ocupar o mesmo espaço disponível horizontalmente.

Exemplo 2: Criando um layout de colunas com tamanhos diferentes

<div class="container">

  <div class="column">Coluna 1</div>

  <div class="column">Coluna 2</div>

  <div class="column">Coluna 3</div>

</div>

.container {

  display: flex;

}



.column:nth-child(1) {

  flex: 2;

  background-color: lightgray;

}



.column:nth-child(2) {

  flex: 1;

  background-color: darkgray;

}



.column:nth-child(3) {

  flex: 1;

  background-color: gray;

}

Neste exemplo, utilizamos a pseudo-classe :nth-child para definir tamanhos diferentes para cada coluna. A primeira coluna possui flex: 2, enquanto as outras duas possuem flex: 1, o que faz com que a primeira coluna ocupe o dobro do espaço das outras.

Compartilhe este artigo com seus amigos que estão começando a aprender CSS e ajudem-nos a dominar o Flexbox juntos!