Guía de CSS Flexbox

Steg 1: Aktivera Flexbox display

Allt börjar med display: flex. Det förvandlar elementet till en flex-container och dess barn till flex-items som läggs ut horisontellt.

Utan flex (block-element staplas vertikalt)
A
B
C
Med display: flex
A
B
C
display: flex;
/* Även: inline-flex för inline-nivå */

Steg 2: Riktning flex-direction

Bestämmer huvudaxeln — i vilken riktning flex-items läggs ut.

1
2
3
4
flex-direction: row;

Steg 3: Radbrytning flex-wrap

Som standard tvingas alla items på en rad. Med flex-wrap tillåts de att brytas till nästa rad.

A
B
C
D
E
F
G
flex-wrap: nowrap;

Steg 4: Huvudaxeln justify-content

Fördelar utrymme längs huvudaxeln (horisontellt vid row).

1
2
3
justify-content: flex-start;

Steg 5: Tvärsaxeln align-items

Justerar items längs tvärsaxeln (vertikalt vid row).

A
B
C
D
align-items: center;

Steg 6: Flerradsjustering align-content

Fördelar utrymme mellan rader när flex-wrap: wrap är aktivt. Påverkar inte enskilda rader utan hela gruppen.

1
2
3
4
5
6
7
align-content: flex-start;
flex-wrap: wrap;

Steg 7: Mellanrum gap

Skapar jämnt avstånd mellan items utan att använda marginaler. Kan sättas separat med row-gap och column-gap.

1
2
3
4
5
6
gap: 8px;

Steg 8: Ordning order

Ändrar visuell ordning utan att ändra HTML-strukturen. Standard är 0. Lägre värde = visas tidigare.

Standard (alla order: 0)
A (0)
B (0)
C (0)
D (0)
Med ändrad order
A (3)
B (1)
C (-1)
D (0)
/* Visuell ordning: C → D → B → A */
order: 3;   /* A */
order: 1;   /* B */
order: -1;  /* C */
order: 0;   /* D */

Steg 9: Växa & Krympa flex-grow / shrink

flex-grow bestämmer hur mycket ett item ska växa relativt andra. flex-shrink bestämmer hur det krymper om utrymmet tar slut.

flex-grow — Klicka för att ändra
1
grow:1
2
grow:1
3
grow:1
flex-grow: 1; /* alla items */
flex-shrink — Standardvärde: 1
shrink:1
basis:300px
shrink:3
basis:300px
/* Item 2 krymper 3× snabbare */
flex-shrink: 1; /* Item 1 */
flex-shrink: 3; /* Item 2 */

Steg 10: Basstorlek flex-basis

Sätter den initiala storleken på ett item innan flex-grow och flex-shrink appliceras. Ersätter width i flex-kontext.

Olika flex-basis
100px
200px
auto
30%
/* Shorthand: flex: grow shrink basis */
flex: 0 1 100px; /* Item A */
flex: 0 1 200px; /* Item B */
flex: 0 1 auto;  /* Item C */
flex: 0 1 30%;   /* Item D */
Vanliga flex-shorthand-mönster
flex: 1
flex: 2
flex: 1
flex: 1;   /* = flex: 1 1 0% → 25% */
flex: 2;   /* = flex: 2 1 0% → 50% */
flex: 1;   /* = flex: 1 1 0% → 25% */

Steg 11: Individuell justering align-self

Åsidosätter align-items för ett enskilt item.

start
center ✦
start
end ✦
stretch ✦
/* Container: align-items: flex-start */

/* ✦ Individuella överskrivningar: */
align-self: center;    /* Item B */
align-self: flex-end;  /* Item D */
align-self: stretch;   /* Item E */

Steg 12: Nästade Flex bonus

Flex-containers kan nästlas. Ett flex-item kan själv vara en flex-container — det ger kraftfulla, komplexa layouter.

Klassisk app-layout
☰ App
Hem
Projekt
Inställningar
v1.0
Kort 1
Kort 2
Kort 3
Bred panel
Kort 4
/* Nästlad flex: column → row → wrap */
display: flex;
flex-direction: column; /* yttre */

/* Inre body: */
display: flex; /* rad: sidebar + main */

/* Main content: */
display: flex;
flex-wrap: wrap;

Reklam