CSS Flexbox-generator

Container-eigenschappen

Item-eigenschappen

De flex: 1-truc

flex: 1 is shorthand voor flex: 1 1 0%. Het maakt een item:

• Groei tot beschikbare ruimte (grow: 1)
• Krimp indien nodig (shrink: 1)
• Start vanaf nul-grootte (basis: 0%)

Voor kolommen van gelijke breedte geeft flex: 1 op elk item een perfecte verdeling. Voor sidebars die niet onder hun content mogen krimpen: gebruik flex: 0 0 240px (geen grow, geen shrink, basis 240px).

Veelvoorkomende patronen

Gecentreerde hero

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

Navbar met logo links, links rechts

.nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links {
  margin-left: auto;  /* duw naar rechts */
  display: flex;
  gap: 1rem;
}

Responsive cardrij

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 260px;  /* grow/shrink, 260px minimum voor wrap */
}

Formulier-veld met button (input flexibel, button vast)

.field {
  display: flex;
  gap: 0.5rem;
}
.field input {
  flex: 1;
}
.field button {
  flex: 0 0 auto;
}

Flexbox versus Grid

• Flexbox: één dimensie (rij OF kolom). Het beste als itemgroottes door content worden bepaald of als je ruimte langs één regel verdeelt.
• Grid: twee dimensies (rijen EN kolommen met expliciete tracks). Het beste als de layout tegelijk een rij- en kolomstructuur heeft.

Voor een nav bar of een stapel kaarten: Flexbox. Voor een productkaarten-grid met meerdere uitgelijnde rijen: CSS Grid. Veel echte pagina’s gebruiken beide, een Grid-pagina-layout met Flexbox binnen componenten.

Veelvoorkomende valkuilen

• Items vullen de container niet: standaard align-items: stretch werkt alleen als items geen vaste hoogte hebben. Bij een expliciete hoogte blijven ze op die maat.
• gap werkt niet: check browser-support. Flex-gap kwam laat; Safari <14.1 ondersteunde het niet. Vanaf 2024 is het universeel.
• Kinderen van een column-flex collapsen: een flex-column heeft align-items: stretch als default, wat items uitrekt naar containerbreedte. Als één kind een breedte zet, breekt het eruit.
• order is alleen visueel: screenreaders en toetsenbordnavigatie volgen de DOM-volgorde. Gebruik order niet om content begrijpelijk te maken; alleen voor visuele finishing.