O CSS flexbox é um modelo de layout unidimensional que permite organizar elementos em linhas e colunas dentro de um contêiner. Você também pode controlar a ordem e a orientação deles. Desenvolvedores web o utilizam para criar sites responsivos e aplicações web que se adaptam a diferentes tamanhos e orientações de tela. Nos referimos ao flexbox como um modelo de layout unidimensional porque ele se concentra em organizar os elementos ao longo de um único eixo por vez. O eixo pode ser horizontal ou vertical. Existem dois conceitos principais que você deve conhecer antes de começar a trabalhar com flexbox: flex container e flex item. Um contêiner flex é um elemento HTML com um layout flex. Você pode organizar e alinhar elementos de várias maneiras dentro de um contêiner flexível. Para tornar um elemento HTML um contêiner flex, você precisa adicionar display: flex aos seus estilos CSS. Itens flex são os filhos diretos de um contêiner flex. Esses elementos podem ser organizados e alinhados dentro de um contêiner flex com base em suas propriedades. Eles também podem encolher ou expandir para se ajustar ao espaço disponível. Este é um exemplo com um contêiner main e três elementos filhos div:

<main>
  <div id="first-div"></div>
  <div id="second-div"></div>
  <div id="third-div"></div>
</main>

Se você definir apenas o width, height e background-color desses elementos div na folha de estilo CSS, cada elemento filho será colocado em sua própria linha porque o container não é flex por padrão.

<link rel="stylesheet" href="styles.css">
<main>
  <div id="first-div"></div>
  <div id="second-div"></div>
  <div id="third-div"></div>
</main>

div {
  width: 80px;
  height: 50px;
}

#first-div {
  background-color: #4d70b2;
}

#second-div {
  background-color: #5c4db2;
}

#third-div {
  background-color: #4da3b2;
}

Mas se você adicionar display: flex ao contêiner main, os elementos div serão reorganizados para caber na mesma linha e eles encolherão se necessário (para ver as prévias, ative o editor interativo):

<link rel="stylesheet" href="styles.css">
<main>
  <div id="first-div"></div>
  <div id="second-div"></div>
  <div id="third-div"></div>
</main>

main {
  display: flex;
}

div {
  width: 80px;
  height: 50px;
}

#first-div {
  background-color: #4d70b2;
}

#second-div {
  background-color: #5c4db2;
}

#third-div {
  background-color: #4da3b2;
}

Por padrão, um contêiner flex será um elemento de nível de bloco, então o próprio contêiner estará em sua própria linha em relação a outros elementos e contêineres. Agora que você sabe mais sobre flex containers e flex items, você também deve conhecer as propriedades flex. Essas propriedades determinam como os itens flex serão organizados, redimensionados e distribuídos dentro do contêiner flex. Alguns dos mais comumente usados são flex-direction, justify-content, align-items e flex-wrap. Great. Agora vamos falar um pouco sobre o modelo flex. Este modelo define como os itens flex são organizados dentro de um contêiner flex. Todo contêiner flex tem dois eixos:

• O eixo principal.
• O eixo cruzado.

A orientação desses eixos determina como diferentes propriedades afetarão o layout e a distribuição dos itens flexíveis. Por padrão, o eixo principal de um contêiner flex é horizontal e o eixo cruzado é vertical. Os itens flex são organizados na direção do eixo principal. O eixo cruzado é perpendicular ao eixo principal. A propriedade flex-direction 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; /* Default */

Para inverter os itens na linha, você pode usar flex-direction: row-reverse:

<link rel="stylesheet" href="styles.css">
<main>
  <div id="first-div"></div>
  <div id="second-div"></div>
  <div id="third-div"></div>
</main>

main {
  display: flex;
  flex-direction: row-reverse; 
}

div {
  width: 80px;
  height: 50px;
}

#first-div {
  background-color: #4d70b2;
}

#second-div {
  background-color: #5c4db2;
}

#third-div {
  background-color: #4da3b2;
}

Isso irá inverter a ordem dos itens flexíveis. Se você quiser alinhar os itens flex verticalmente, basta definir flex-direction como column no contêiner flex. Isso mudará a direção do eixo principal:

<link rel="stylesheet" href="styles.css">
<main>
  <div id="first-div"></div>
  <div id="second-div"></div>
  <div id="third-div"></div>
</main>

main {
  display: flex;
  flex-direction: column; 
}

div {
  width: 80px;
  height: 50px;
}

#first-div {
  background-color: #4d70b2;
}

#second-div {
  background-color: #5c4db2;
}

#third-div {
  background-color: #4da3b2;
}

Agora os elementos div serão alinhados verticalmente porque o eixo principal será vertical e o eixo cruzado será horizontal. Você também pode inverter a ordem dos itens flex verticalmente com flex-direction: column-reverse:

<link rel="stylesheet" href="styles.css">
<main>
  <div id="first-div"></div>
  <div id="second-div"></div>
  <div id="third-div"></div>
</main>

main {
  display: flex;
  flex-direction: column-reverse; 
}

div {
  width: 80px;
  height: 50px;
}

#first-div {
  background-color: #4d70b2;
}

#second-div {
  background-color: #5c4db2;
}

#third-div {
  background-color: #4da3b2;
}

O CSS flexbox é um modelo de layout poderoso que oferece uma maneira flexível e eficiente de organizar elementos dentro de um contêiner. Ao entender os conceitos-chave de flex containers, flex items e as várias propriedades flex, você pode criar sites dinâmicos e responsivos que se adaptam a diferentes tamanhos e orientações de tela.