CSS: flexbox

CSS Flexbox (Flexible Box Layout) is een layout-methode die ontworpen is om elementen efficiënt te rangschikken, te verdelen en uit te lijnen in een container, zelfs wanneer hun grootte onbekend of dynamisch is.

Flexbox is behoorlijk uitgebreid. We behandelen hier de basisconcepten, een volledig visueel overzicht kan je op deze pagina raadplegen: A guide to flexbox.

Oefenen kan je doen met Flexbox froggy.

Kernconcepten

Flex Container en Flex Items

• Flex Container: Het parent element met display: flex
• Flex Items: De directe kinderen van de flex container

Assen in Flexbox

• Main Axis: De primaire as (horizontaal bij flex-direction: row)
• Cross Axis: De dwarsas (verticaal bij flex-direction: row)

Flex Parent (Container) Properties

display: flex

.container {
    display: flex; /* Maakt het element een flex container */
}

flex-direction

Bepaalt de richting van de hoofdas:

.flex-parent {
    flex-direction: row;         /* Standaard: horizontaal, links naar rechts */
    flex-direction: row-reverse; /* Horizontaal, rechts naar links */
    flex-direction: column;      /* Verticaal, boven naar onder */
    flex-direction: column-reverse; /* Verticaal, onder naar boven */
}

Flex row

1

2

3

Flex row-reverse

1

2

3

Flex column

1

2

3

Flex column-reverse

1

2

3

flex-wrap

Bepaalt of items naar een nieuwe lijn kunnen wrappen:

.flex-parent {
    flex-wrap: nowrap;      /* Standaard: alle items op één lijn */
    flex-wrap: wrap;        /* Items kunnen naar volgende lijn */
    flex-wrap: wrap-reverse; /* Items wrappen in omgekeerde volgorde */
}

Flex wrap: nowrap

1

2

3

Flex wrap: wrap

1

2

3

Flex wrap: wrap-reverse

1

2

3

justify-content

Uitlijning langs de hoofdas (main axis):

.flex-parent {
    justify-content: flex-start;    /* Items aan het begin (standaard) */
    justify-content: flex-end;      /* Items aan het eind */
    justify-content: center;        /* Items gecentreerd */
    justify-content: space-between; /* Gelijke ruimte tussen items */
    justify-content: space-around;  /* Gelijke ruimte rondom items */
    justify-content: space-evenly;  /* Gelijke ruimte tussen en rondom items */
}

Justify-content: flex-start

1

2

3

Justify-content: flex-end

1

2

3

Justify-content: center

1

2

3

Justify-content: space-between

1

2

3

Justify-content: space-around

1

2

3

Justify-content: space-evenly

1

2

3

align-items

Uitlijning langs de dwarsas (cross axis):

.flex-parent {
    align-items: stretch;    /* Items strekken zich uit (standaard) */
    align-items: flex-start; /* Items aan het begin van dwarsas */
    align-items: flex-end;   /* Items aan het eind van dwarsas */
    align-items: center;     /* Items gecentreerd op dwarsas */
    align-items: baseline;   /* Items uitgelijnd op baseline */
}

Align-items: stretch

1

2,
grotere kader

3

Align-items: flex-start

1

2,
grotere kader

3

Align-items: flex-end

1

2,
grotere kader

3

Align-items: center

1

2,
grotere kader

3

Align-items: baseline

1

2,
grotere kader

3

gap

Ruimte tussen flex items:

.flex-parent {
    gap: 1rem;           /* Gelijke ruimte tussen alle items */
    row-gap: 1rem;       /* Ruimte tussen rijen */
    column-gap: 0.5rem;  /* Ruimte tussen kolommen */
}

Align-items: stretch

1

2,
grotere kader

3

Align-items: flex-start

1

2,
grotere kader

3

Align-items: flex-end

1

2,
grotere kader

3

Align-items: center

1

2,
grotere kader

3

Align-items: baseline

1

2,
grotere kader

3

align-content

Uitlijning van meerdere lijnen (alleen bij flex-wrap):

.flex-parent {
    align-content: stretch;      /* Lijnen strekken zich uit */
    align-content: flex-start;   /* Lijnen aan het begin */
    align-content: flex-end;     /* Lijnen aan het eind */
    align-content: center;       /* Lijnen gecentreerd */
    align-content: space-between; /* Gelijke ruimte tussen lijnen */
    align-content: space-around; /* Gelijke ruimte rondom lijnen */
}

Gap

1

2

3

Row-gap

1

2

3

Column-gap

1

2

3

Flex Child (Item) Properties

flex-grow

Bepaalt hoeveel een item moet groeien:

.flex-child {
    flex-grow: 0; /* Standaard: groeit niet */
    flex-grow: 1; /* Groeit om beschikbare ruimte te vullen */
    flex-grow: 2; /* Groeit twee keer zo veel als items met flex-grow: 1 */
}

1 (grow: 1)

2 (grow: 0)

3 (grow: 2)

flex-shrink

Bepaalt hoeveel een item mag krimpen:

.flex-child {
    flex-shrink: 1; /* Standaard: mag krimpen */
    flex-shrink: 0; /* Mag niet krimpen */
    flex-shrink: 2; /* Krimpt twee keer zo veel */
}

1 (shrink: 2)

2 (shrink: 0)

3 (shrink: 1)

flex-basis

De initiële hoofdgrootte van een item:

.flex-child {
    flex-basis: auto;  /* Standaard: gebaseerd op content */
    flex-basis: 200px; /* Vaste breedte */
    flex-basis: 25%;   /* Percentage van container */
    flex-basis: 0;     /* Geen initiële grootte */
}

flex (shorthand)

Combinatie van grow, shrink en basis:

.flex-child {
    flex: 1;          /* flex: 1 1 0% */
    flex: 0 0 200px;  /* flex-grow: 0, flex-shrink: 0, flex-basis: 200px */
    flex: auto;       /* flex: 1 1 auto */
    flex: none;       /* flex: 0 0 auto */
}

align-self

Overschrijft align-items voor individueel item:

.flex-child {
    align-self: auto;      /* Erft van parent (standaard) */
    align-self: flex-start; /* Naar begin van dwarsas */
    align-self: flex-end;   /* Naar eind van dwarsas */
    align-self: center;     /* Gecentreerd op dwarsas */
    align-self: baseline;   /* Uitgelijnd op baseline */
    align-self: stretch;    /* Uitgerekt over dwarsas */
}

order

Verandert de visuele volgorde zonder HTML te wijzigen:

.flex-child {
    order: 0;  /* Standaard volgorde */
    order: -1; /* Verschijnt eerder */
    order: 1;  /* Verschijnt later */
}

1 (order: 2)

2 (order: 0)

3 (order: 1)