CSS Flexbox - Komplett guide med exempel

Introduktion till Flexbox

CSS Flexbox (Flexible Box Layout) är ett layout-system designat för att distribuera utrymme och placera element i en container. Det löser många klassiska CSS-problem och gör responsive design mycket enklare.

Varför Flexbox?

Före Flexbox

Traditionellt användes float, inline-block och positioning för layouts:

/* Gammalt sätt - komplicerat och bräckligt */
.container::after {
  content: "";
  display: table;
  clear: both;
}

.item {
  float: left;
  width: 33.333%;
}

Problem:

Svårt att centrera vertikalt
Komplicerat att skapa lika höga kolumner
Mycket boilerplate-kod
Känsligt för ändringar

Med Flexbox

/* Modernt sätt - enkelt och flexibelt */
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Fördelar:

Enkel vertikal och horisontell alignment
Automatisk space distribution
Responsive utan media queries (ofta)
Lika höga element automatiskt

Grundläggande Koncept

Flex Container & Flex Items

<div class="container"> <!-- Flex Container -->
  <div class="item">1</div> <!-- Flex Item -->
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex; /* Skapar flex container */
}

Main Axis & Cross Axis

Flexbox arbetar med två axlar:

Main Axis (huvud-axel):

Default: horisontell (left → right)
Kontrolleras av flex-direction

Cross Axis (kors-axel):

Vinkelrät mot main axis
Default: vertikal (top → bottom)

flex-direction: row (default)
Main Axis:    →
Cross Axis:   ↓

flex-direction: column
Main Axis:    ↓
Cross Axis:   →

Container Properties

display: flex

Aktiverar flexbox:

.container {
  display: flex;        /* Block-level flex container */
  display: inline-flex; /* Inline-level flex container */
}

flex-direction

Bestämmer huvudaxelns riktning:

.container {
  flex-direction: row;            /* → Default */
  flex-direction: row-reverse;    /* ← */
  flex-direction: column;         /* ↓ */
  flex-direction: column-reverse; /* ↑ */
}

Exempel:

/* Horisontell navbar */
.navbar {
  display: flex;
  flex-direction: row;
}

/* Vertikal sidebar */
.sidebar {
  display: flex;
  flex-direction: column;
}

justify-content

Alignment längs main axis:

.container {
  justify-content: flex-start;    /* ⬜⬜⬜_____ */
  justify-content: flex-end;      /* _____⬜⬜⬜ */
  justify-content: center;        /* __⬜⬜⬜__ */
  justify-content: space-between; /* ⬜___⬜___⬜ */
  justify-content: space-around;  /* _⬜__⬜__⬜_ */
  justify-content: space-evenly;  /* _⬜_⬜_⬜_ */
}

Vanliga use cases:

/* Centrera innehåll */
.centered {
  display: flex;
  justify-content: center;
}

/* Push item till höger */
.header {
  display: flex;
  justify-content: space-between;
}
/* <div class="header">
     <div>Logo</div>
     <div>Menu</div>
   </div> */

align-items

Alignment längs cross axis:

.container {
  align-items: stretch;     /* Default - fyller hela höjden */
  align-items: flex-start;  /* Toppen */
  align-items: flex-end;    /* Botten */
  align-items: center;      /* Mitten */
  align-items: baseline;    /* Text baseline */
}

Perfect centering:

.center-everything {
  display: flex;
  justify-content: center; /* Horisontellt */
  align-items: center;     /* Vertikalt */
  height: 100vh;
}

flex-wrap

Hantera wrapping av items:

.container {
  flex-wrap: nowrap;       /* Default - alla på en rad */
  flex-wrap: wrap;         /* Wrap till nästa rad */
  flex-wrap: wrap-reverse; /* Wrap men omvänd ordning */
}

Responsive grid:

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.grid-item {
  flex: 1 1 300px; /* Grow, shrink, base 300px */
}
/* Items wrappar automatiskt när det blir för smalt! */

align-content

Alignment av rader (när flex-wrap används):

.container {
  flex-wrap: wrap;
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: stretch;
}

gap

Mellanrum mellan items (modern CSS):

.container {
  display: flex;
  gap: 1rem;              /* Alla gaps */
  gap: 1rem 2rem;         /* Vertikal Horisontell */
  row-gap: 1rem;          /* Bara rader */
  column-gap: 2rem;       /* Bara kolumner */
}

Före gap:

/* Gammalt sätt - margin på items */
.item {
  margin-right: 1rem;
}

.item:last-child {
  margin-right: 0;
}

Med gap:

/* Nytt sätt - mycket enklare! */
.container {
  display: flex;
  gap: 1rem;
}

Item Properties

flex-grow

Hur mycket item kan växa:

.item {
  flex-grow: 0; /* Default - väx inte */
  flex-grow: 1; /* Kan växa */
  flex-grow: 2; /* Växer dubbelt så mycket */
}

Exempel:

.container {
  display: flex;
}

.sidebar {
  flex-grow: 0;
  width: 200px;
}

.content {
  flex-grow: 1; /* Tar allt remaining space */
}

flex-shrink

Hur mycket item kan krympa:

.item {
  flex-shrink: 1; /* Default - kan krympa */
  flex-shrink: 0; /* Krymp inte */
  flex-shrink: 2; /* Krymper dubbelt så mycket */
}

Exempel:

.fixed-width {
  flex-shrink: 0;
  width: 200px; /* Behåll alltid denna bredd */
}

.flexible {
  flex-shrink: 1; /* Kan krympa vid behov */
}

flex-basis

Initial storlek innan grow/shrink:

.item {
  flex-basis: auto;   /* Default - baserat på content */
  flex-basis: 200px;  /* Fast storlek */
  flex-basis: 50%;    /* Procent */
  flex-basis: 0;      /* Ingen base size */
}

flex (shorthand)

Kombinerar grow, shrink och basis:

.item {
  flex: 1;           /* flex: 1 1 0% */
  flex: 0 0 200px;   /* grow shrink basis */
  flex: 2 1 auto;    /* Växer dubbelt, kan krympa */
}

Vanliga patterns:

/* Equal width columns */
.equal {
  flex: 1; /* Alla får samma bredd */
}

/* Fixed sidebar + flexible content */
.sidebar {
  flex: 0 0 250px; /* Fixed 250px */
}

.content {
  flex: 1; /* Tar resten */
}

/* Responsive cards */
.card {
  flex: 1 1 300px; /* Minst 300px, kan växa */
}

align-self

Överstyr align-items för enskild item:

.container {
  align-items: center;
}

.special-item {
  align-self: flex-end; /* Denna går till botten */
}

order

Ändra visuell ordning:

.item-1 { order: 2; }
.item-2 { order: 1; } /* Visas först */
.item-3 { order: 3; }

Användbart för:

Responsive reordering
Flytta element utan att ändra HTML

@media (max-width: 768px) {
  .sidebar {
    order: 2; /* Flytta sidebar efter content på mobil */
  }
  
  .content {
    order: 1;
  }
}

Praktiska Exempel

1. Perfect Centering

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

<div class="center-box">
  <div>Perfectly centered!</div>
</div>

2. Holy Grail Layout

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  flex: 0 0 60px;
}

.main {
  display: flex;
  flex: 1;
}

.sidebar {
  flex: 0 0 200px;
}

.content {
  flex: 1;
}

.footer {
  flex: 0 0 60px;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.nav-links {
  display: flex;
  gap: 2rem;
}

@media (max-width: 768px) {
  .nav {
    flex-direction: column;
  }
  
  .nav-links {
    flex-direction: column;
    gap: 1rem;
  }
}

4. Card Grid

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

.card {
  flex: 1 1 calc(33.333% - 1.5rem);
  min-width: 250px;
}

@media (max-width: 768px) {
  .card {
    flex: 1 1 100%;
  }
}

5. Form Layout

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

.form-field {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-field label {
  margin-bottom: 0.5rem;
}

.form-field input {
  flex: 1;
}

Flexbox vs Grid

Använd Flexbox för:

✅ En-dimensionella layouts (rad ELLER kolumn)
✅ Navigation bars
✅ Button groups
✅ Forms
✅ Small components

Använd Grid för:

✅ Två-dimensionella layouts (rad OCH kolumn)
✅ Page layouts
✅ Complex grids
✅ Magazine-style layouts

Ofta används båda:

.page-layout {
  display: grid; /* Overall page structure */
  grid-template-columns: 200px 1fr;
}

.header {
  display: flex; /* Items inside header */
  justify-content: space-between;
}

Browser Support

Flexbox har utmärkt stöd i alla moderna browsers:

Chrome 29+
Firefox 28+
Safari 9+
Edge 12+

Prefix för äldre browsers:

.container {
  display: -webkit-flex;
  display: flex;
}

Common Pitfalls

1. Min-width på flex items

/* Problem: items krymper inte under content width */
.item {
  flex: 1;
  min-width: 0; /* Fix */
}

2. Margins och justify-content

/* Margin auto övertar alignment */
.item {
  margin-left: auto; /* Pushar item till höger */
}

3. Height 100% fungerar inte

/* Förälder måste ha definierad höjd */
.parent {
  height: 100vh; /* Eller annan fast höjd */
}

.child {
  height: 100%; /* Nu fungerar det */
}

Best Practices

Använd gap istället för margin när möjligt
flex shorthand istället för individuella properties
Semantic HTML - flexbox ändrar bara visuell layout
Mobile-first - börja med column, ändra till row på större skärmar
Accessibility - order ändrar inte focus order!

Verktyg

Testa flexbox interaktivt:

CSS Flexbox Generator - Visuell flexbox builder
CSS Grid Generator - Jämför med Grid
Responsive Breakpoint Preview - Testa på olika skärmar

Slutsats

Flexbox är ett ovärderligt verktyg för modern CSS:

Perfekt för:

Component layouts
Navigation
Forms
Centering
Space distribution

Lär dig dessa properties först:

display: flex
justify-content
align-items
flex-direction
gap
flex: 1

Med dessa kan du lösa 90% av dina layout-behov!

Introduktion till Flexbox

Varför Flexbox?

Före Flexbox

Med Flexbox

Grundläggande Koncept

Flex Container & Flex Items

Main Axis & Cross Axis

Container Properties

display: flex

flex-direction

justify-content

align-items

flex-wrap

align-content

gap

Item Properties

flex-grow

flex-shrink

flex-basis

flex (shorthand)

align-self

order

Praktiska Exempel

1. Perfect Centering

2. Holy Grail Layout

3. Responsive Navigation

4. Card Grid

5. Form Layout

Flexbox vs Grid

Använd Flexbox för:

Använd Grid för:

Browser Support

Common Pitfalls

1. Min-width på flex items

2. Margins och justify-content

3. Height 100% fungerar inte

Best Practices

Verktyg

Slutsats