Propriedades flex são propriedades que você pode aplicar a contêineres flex para determinar a distribuição dos elementos filhos. Cobriremos alguns dos mais usados: flex-wrap, justify-content e align-items. Vamos começar com flex-wrap. 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. nowrap é o valor padrão—os itens flexíveis não serão quebrados em uma nova linha, mesmo que sua largura exceda a largura do contêiner. No código abaixo, temos três elementos div. Vamos focar na width. O contêiner main com borda vermelha tem uma width de 200px, enquanto seus três elementos filhos div combinados têm uma width de 240px (80px cada):

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

main {
  width: 200px;
  display: flex;
  border: 2px solid red;
}

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

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

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

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

A largura dos elementos div excede a largura do seu contêiner, mas por padrão eles serão reduzidos para caber no espaço disponível. Se você quiser quebrá-los quando excederem a largura do seu contêiner, pode definir flex-wrap: wrap no contêiner flex:

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

main {
  width: 200px;
  display: flex;
  flex-wrap: wrap;
  border: 2px solid red;
}

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

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

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

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

Os elementos div serão reorganizados em linhas quando excederem a largura do seu contêiner. Você pode envolver os itens flexíveis em ordem reversa com flex-wrap: wrap-reverse. A propriedade flex-flow é uma propriedade abreviada para flex-direction e flex-wrap. Neste exemplo, definimos flex-direction como column e flex-wrap como wrap-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 {
  width: 200px;
  display: flex;
  flex-flow: column wrap-reverse;
  border: 2px solid red;
}

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

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

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

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

Great. Agora vamos falar sobre justify-content. justify-content alinha os elementos filhos ao longo do eixo principal do contêiner flexível. Se você atribuir o valor flex-start a justify-content, os itens flex serão alinhados ao início do eixo principal. Isso pode ser horizontal ou vertical:

<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;
  justify-content: flex-start;
  border: 2px solid red;
}

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

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

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

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

Com justify-content: flex-end, os itens flex são alinhados ao final do eixo principal, horizontalmente ou verticalmente.

<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;
  justify-content: flex-end;
  border: 2px solid red;
}

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

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

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

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

Para centralizar os itens flexíveis ao longo do eixo principal, você pode usar justify-content: center.

<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;
  justify-content: center;
  border: 2px solid red;
}

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

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

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

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

Para distribuir os elementos uniformemente ao longo do eixo principal, você pode usar justify-content: space-between. Isso adicionará algum espaço entre os itens flexíveis se necessário.

<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;
  justify-content: space-between;
  border: 2px solid red;
}

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

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

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

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

justify-content: space-around distribui os itens flex de forma uniforme dentro do eixo principal, adicionando um espaço antes do primeiro item e depois do último item. Este espaço adicional é metade do espaço entre cada par de itens adjacentes. Se houver apenas um item para distribuir, ele será centralizado.

<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;
  justify-content: space-around;
  border: 2px solid red;
}

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

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

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

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

E por último, mas não menos importante, temos justify-content: space-evenly, que distribui os itens uniformemente ao longo do eixo principal. O espaço entre os itens e o espaço antes e depois dos primeiros e últimos elementos são exatamente os mesmos:

<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;
  justify-content: space-evenly;
  border: 2px solid red;
}

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

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

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

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

Great. Agora você sabe como distribuir os itens flex ao longo do eixo principal. Mas você também pode querer distribuí-los ao longo do eixo transversal. Lembre-se de que o eixo cruzado é perpendicular ao eixo principal. Você pode fazer isso com a propriedade align-items. Para centralizar os itens ao longo do eixo cruzado, você só precisa adicionar align-items: center ao contêiner flex:

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

main {
  height: 300px;
  display: flex;
  align-items: center;
  border: 2px solid red;
}

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

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

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

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

Neste exemplo, os itens flex estão centralizados ao longo do eixo cruzado, que é vertical por padrão. Se o eixo cruzado for horizontal, eles serão centralizados horizontalmente. Em contraste, align-items: flex-start alinha os itens ao início do eixo cruzado:

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

main {
  height: 300px;
  display: flex;
  align-items: flex-start;
  border: 2px solid red;
}

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

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

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

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

O oposto é align-items: flex-end. Isso alinhará os itens flex ao final do eixo cruzado, verticalmente ou horizontalmente.

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

main {
  height: 300px;
  display: flex;
  align-items: flex-end;
  border: 2px solid red;
}

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

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

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

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

Para esticar os itens flexíveis ao longo do eixo cruzado, você pode usar align-items: stretch. Isso também funciona com elementos que são dimensionados automaticamente, como aqueles sem width ou height definidos, ou com apenas um width ou height mínimo. Os itens flexíveis irão se esticar para preencher o contêiner na direção do eixo cruzado.

<link rel="stylesheet" href="styles.css">

<div class="container">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
</div>

.container {
  display: flex;
  align-items: stretch; 
  border: 2px solid #444;
  height: 200px; 
}

.box {
  width: 100px;           
  border: 1px solid #888;
  background-color: lightblue;
}

E finalmente, você pode usar a propriedade align-self para atribuir um alinhamento diferente no eixo cruzado a um item flex individual. Por exemplo, você pode esticá-lo com align-self: stretch.

<link rel="stylesheet" href="styles.css">

<div class="container">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box special">Three</div>
</div>

.container {
  display: flex;
  align-items: flex-start; 
  border: 2px solid #444;
  height: 200px; 
}

.box {
  width: 100px;
  border: 1px solid #888;
  background-color: lightblue;
  margin: 4px;
}

.special {
  align-self: stretch; 
  background-color: lightcoral;
}

Você pode centralizá-lo com align-self: center.

<link rel="stylesheet" href="styles.css">

<div class="container">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box special">Three</div>
</div>

.container {
  display: flex;
  align-items: flex-start; 
  border: 2px solid #444;
  height: 200px; 
}

.box {
  width: 100px;
  border: 1px solid #888;
  background-color: lightblue;
  margin: 4px;
}

.special {
  align-self: center; 
  background-color: lightcoral;
}

Você pode alinhá-lo ao início do eixo cruzado com align-self: flex-start.

<link rel="stylesheet" href="styles.css">

<div class="container">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box special">Three</div>
</div>

.container {
  display: flex;
  align-items: flex-start; 
  border: 2px solid #444;
  height: 200px; 
}

.box {
  width: 100px;
  border: 1px solid #888;
  background-color: lightblue;
  margin: 4px;
}

.special {
  align-self: flex-start; 
  background-color: lightcoral;
}

Ou você pode alinhá-lo ao final do eixo cruzado com align-self: flex-end.

<link rel="stylesheet" href="styles.css">

<div class="container">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box special">Three</div>
</div>

.container {
  display: flex;
  align-items: flex-start; 
  border: 2px solid #444;
  height: 200px; 
}

.box {
  width: 100px;
  border: 1px solid #888;
  background-color: lightblue;
  margin: 4px;
}

.special {
  align-self: flex-end; 
  background-color: lightcoral;
}

Existem outras propriedades e valores de flex que você pode escolher para criar o layout responsivo que você imagina, mas estes são os mais usados. Com essas propriedades CSS flex e seu novo conhecimento do modelo CSS flex, você pode começar a criar layouts responsivos para proporcionar uma experiência de usuário fluida e inclusiva em vários dispositivos.