Hoe stel je de eigenschappen van flexbox in?

Eigenschappen worden ingesteld voor de container (het element waarop display: flex of display: inline-flex wordt toegepast) en zijn directe afstammelingen (de elementen binnen de container).

Eigenschappen voor de container:

display: Bepaalt dat het element een flex-container is. Mogelijke waarden: flex (blok) en inline-flex (inline).
flex-direction: Stelt de richting van de hoofdas in waarop de flex-elementen worden geplaatst. Mogelijke waarden: row (standaard, van links naar rechts), row-reverse (van rechts naar links), column (van boven naar beneden), column-reverse (van onder naar boven).
flex-wrap: Regelt of de flex-elementen op een nieuwe regel worden gebroken als ze de grenzen van de container overschrijden. Mogelijke waarden: nowrap (standaard, geen breuk), wrap (terugbreken op een nieuwe regel), wrap-reverse (terugbreken in omgekeerde volgorde).
justify-content: Lijnt de flex-elementen uit langs de hoofdas. Mogelijke waarden: flex-start (begin van de container), flex-end (einde van de container), center, space-between (gelijke ruimte tussen de elementen, eerste aan het begin, laatste aan het einde), space-around (gelijke ruimte rondom elk element).
align-items: Lijnt de flex-elementen uit langs de dwarsas. Mogelijke waarden: stretch (standaard, strekt de elementen uit tot de hoogte van de container), flex-start (begin van de container), flex-end (einde van de container), center, baseline (uitlijnen op de basislijn van de tekst).
align-content: Lijnt de rijen van flex-elementen uit langs de dwarsas (wanneer flex-wrap wordt gebruikt). Heeft geen effect als er slechts één rij is. Mogelijke waarden: stretch (standaard), flex-start, flex-end, center, space-between, space-around.
gap, row-gap, column-gap: Bepalen de afstand tussen de flex-elementen langs de hoofdas en dwarsas.

Eigenschappen voor de elementen (directe afstammelingen van de flex-container):

order: Bepaalt de volgorde van het element binnen de container. Standaard hebben alle order: 0. Elementen met een lagere order-waarde worden eerder geplaatst.
flex-grow: Bepaalt hoeveel keer het element kan groeien ten opzichte van andere, indien er vrije ruimte is. Standaard 0 (groeit niet).
flex-shrink: Bepaalt hoeveel keer het element kan krimpen bij gebrek aan ruimte. Standaard 1 (krimpt).
flex-basis: Bepaalt de initiële grootte van het element voordat de vrije ruimte wordt verdeeld. Kan in pixels, procenten of auto. Standaard auto.
flex: Verkorte eigenschap voor flex-grow, flex-shrink en flex-basis. Bijvoorbeeld flex: 1 1 auto;.
align-self: Overschrijft de waarde van align-items voor een enkel element. Mogelijke waarden: auto (gebruikt de waarde van align-items van de ouder), stretch, flex-start, flex-end, center, baseline.

Voorbeeld:

.flex-container {
  display: flex; /* Maakt het element tot een flex-container */
  flex-direction: row; /* Rangschikt de elementen in een rij */
  justify-content: center; /* Centreert de elementen langs de hoofdas */
  align-items: center; /* Centreert de elementen langs de dwarsas */
  gap: 10px; /* Stelt de afstand tussen de elementen in */
}

.flex-item {
  flex-grow: 1; /* Het element kan groeien */
  flex-basis: 100px; /* Initiële grootte van het element */
}

.special-item {
  order: -1; /* Dit element wordt als eerste geplaatst */
  align-self: flex-end; /* Overschrijft de uitlijning in de dwarsas voor dit element */
}