Introdução ao CSS Flexbox e ao Modelo Flexível

• Definição: CSS flexbox é um modelo de layout unidimensional que permite organizar elementos em linhas e colunas dentro de um contêiner.
• Modelo Flex: Este modelo define como os itens flex são organizados dentro de um contêiner flex. Todo contêiner flex possui dois eixos: o eixo principal e o eixo transversal.

A Propriedade flex-direction

• Definição: Esta propriedade define a direção do eixo principal. O valor padrão de flex-direction é row, que posiciona todos os itens flex na mesma linha, na direção do idioma padrão do seu navegador (da esquerda para a direita ou da direita para a esquerda).
• flex-direction: row-reverse;: Isso inverte os itens na linha.
• flex-direction: column;: Isso alinhará os itens flex verticalmente em vez de horizontalmente.
• flex-direction: column-reverse;: Isso inverte a ordem dos itens flex na vertical.

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

.container {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.box {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

A Propriedade flex-wrap

• Definição: Esta propriedade determina como os itens flexíveis são quebrados dentro de um contêiner flexível para se ajustarem ao espaço disponível. flex-wrap pode assumir três valores possíveis: nowrap, wrap e wrap-reverse.
• flex-wrap: nowrap;: Este é o valor padrão. Os itens flex não serão quebrados em uma nova linha, mesmo se sua largura exceder a largura do contêiner.
• flex-wrap: wrap;: Esta propriedade irá quebrar os itens quando eles excederem a largura do seu contêiner.
• flex-wrap: wrap-reverse;: Esta propriedade irá envolver os itens flex em ordem reversa.
• Propriedade flex-flow: Esta propriedade é uma propriedade abreviada para flex-direction e flex-wrap.

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  width: 150px;
  background: #f0f0f0;
}

.box {
  width: 60px;
  padding: 10px;
  margin: 5px;
  background: skyblue;
  text-align: center;
}

A Propriedade justify-content

• Definição: Esta propriedade alinha os elementos filhos ao longo do eixo principal do contêiner flexível.
• justify-content: flex-start;: Neste caso, os itens flex serão alinhados ao início do eixo principal. Isso pode ser horizontal ou vertical.
• justify-content: flex-end;: Neste caso, os itens flex são alinhados ao final do eixo principal, horizontalmente ou verticalmente.
• justify-content: center;: Isso centraliza os itens flex ao longo do eixo principal.
• justify-content: space-between;: Isso distribuirá os elementos uniformemente ao longo do eixo principal.
• justify-content: space-around;: Isso distribuirá os itens flex de forma uniforme dentro do eixo principal, adicionando um espaço antes do primeiro item e depois do último item.
• justify-content: space-evenly;: Isso distribuirá os itens uniformemente ao longo do eixo principal.

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
  background: #eee;
}

.box {
  padding: 20px;
  background: salmon;
}

A Propriedade align-items

• Definição: Esta propriedade é usada para distribuir itens ao longo do eixo cruzado. Lembre-se que o eixo cruzado é perpendicular ao eixo principal.
• align-items: center;: Isso é usado para centralizar os itens ao longo do eixo cruzado.
• align-items: flex-start;: Isso alinha os itens ao início do eixo cruzado.
• align-items: stretch;: Isso é usado para esticar os itens flex ao longo do eixo cruzado.

<div class="container">
  <div class="box tall">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

.container {
  display: flex;
  align-items: center;
  height: 150px;
  background: #ddd;
}

.box {
  background: lightgreen;
  padding: 10px;
}

.tall {
  height: 100px;
}