Flexbox

Flexbox

Flexbox é um modelo de layout unidimensional para distribuição de espaço e alinhamento.

Container Flex

.container {
  display: flex;
  flex-direction: row;         /* row | column | row-reverse | column-reverse */
  flex-wrap: wrap;             /* nowrap | wrap | wrap-reverse */
  justify-content: center;     /* main axis: flex-start | flex-end | center |
                                  space-between | space-around | space-evenly */
  align-items: center;        /* cross axis: stretch | flex-start | flex-end |
                                  center | baseline */
  align-content: space-between; /* cross axis (multi-line): flex-start | flex-end |
                                   center | stretch | space-between | space-around */
  gap: 1rem;                  /* row-gap + column-gap */
}

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

Itens Flex

.item {
  flex-grow: 1;       /* proporção de crescimento */
  flex-shrink: 1;     /* proporção de encolhimento */
  flex-basis: 200px;  /* tamanho base antes de crescer/encolher */

  /* Atalho: flex: grow shrink basis */
  flex: 1 1 200px;

  align-self: center;       /* alinhamento individual no cross axis */
  order: 0;                 /* ordem visual (padrão 0) */
}

Exemplos Práticos

Navbar Responsiva

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #2c3e50;
  color: white;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.nav-links a {
  color: white;
  text-decoration: none;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

<nav class="navbar">
  <div class="logo">MeuSite</div>
  <ul class="nav-links">
    <li><a href="#home">Home</a></li>
    <li><a href="#sobre">Sobre</a></li>
    <li><a href="#contato">Contato</a></li>
  </ul>
</nav>

Card Grid

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 2rem;
}

.card {
  flex: 1 1 300px;
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.card.featured {
  flex: 2 1 400px;
  background: #3498db;
  color: white;
}

Centering Perfeito

.centering {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Layout de Formulário

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.form-row {
  display: flex;
  gap: 1rem;
}

.form-row > * {
  flex: 1;
}

<form class="form">
  <div class="form-row">
    <div class="form-group">
      <label for="nome">Nome</label>
      <input type="text" id="nome">
    </div>
    <div class="form-group">
      <label for="sobrenome">Sobrenome</label>
      <input type="text" id="sobrenome">
    </div>
  </div>
  <div class="form-group">
    <label for="email">E-mail</label>
    <input type="email" id="email">
  </div>
</form>

Lab: Flexbox Layout Completo

Crie um layout responsivo com navbar, grid de cards e footer usando apenas Flexbox.

# Verifique em diferentes viewports
# Use DevTools > Toggle Device Toolbar (Ctrl+Shift+M)

Flexbox resolve 90% dos problemas de layout na web. Domine o container e os itens, e o alinhamento se torna trivial.