Kā iestatīt flexbox īpašības?

Tiek konteinera (elementa, kam tiek display: flex vai display: inline-flex), gan arī tā tiešajiem bērniem (iekšējiem elementiem) tiek noteiktas īpašības.

Konteinera īpašības:

display: Nosaka, ka elements ir flex konteineris. Iespējamās vērtības: flex (bloka elements) un inline-flex (rindas elements).
flex-direction: Nosaka galvenās ass virzienu, kurā izvietoti flex elementi. Iespējamās vērtības: row (noklusējums, no kreisās uz labo), row-reverse (no labās uz kreiso), column (no augšas uz leju), column-reverse (no apakšas uz augšu).
flex-wrap: Kontrolē, vai flex elementi pārceļas uz jaunu rindu, ja tie pārsniedz konteineru robežas. Iespējamās vērtības: nowrap (noklusējums, pārnešana nenotiek), wrap (pārvietojas uz jaunu rindu), wrap-reverse (pārvietojas uz jaunu rindu atpakaļgaitā).
justify-content: Izlīdzina flex elementus galvenās ass garumā. Iespējamās vērtības: flex-start (konteinera sākums), flex-end (konteinera beigas), center, space-between (vienādi atstarpes starp elementiem, pirmais pie sākuma, pēdējais pie beigām), space-around (vienādas atstarpes ap katru elementu).
align-items: Izlīdzina flex elementus perpendikulāri galvenajai ass. Iespējamās vērtības: stretch (noklusējums, izstiepj elementus pēc konteineru augstuma), flex-start (konteinera sākums), flex-end (konteinera beigas), center, baseline (izlīdzina pēc teksta bāzes līnijas).
align-content: Izlīdzina flex elementu rindas (kad izmanto flex-wrap) perpendikulāri galvenajai ass. Netaikots, ja ir tikai viena rinda. Iespējamās vērtības: stretch (noklusējums), flex-start, flex-end, center, space-between, space-around.
gap, row-gap, column-gap: Nosaka attālumu starp flex elementiem galvenās un perpendikulārās ass virzienā.

Elementiem (tiešajiem flex konteineru bērniem) ir šādas īpašības:

order: Nosaka elementa izvietojuma kārtību konteinerā. Noklusējums, ka visiem ir order: 0. Mazāka order vērtība nozīmē, ka tas būs priekšā.
flex-grow: Nosaka, cik reizes elements var palielināties, ja ir brīva vieta. Noklusējums 0 (nepalielinās).
flex-shrink: Nosaka, cik reizes elements var samazināties, ja trūkst vietas. Noklusējums 1 (samazinās).
flex-basis: Nosaka sākotnējo elementa izmēru pirms brīvās vietas sadales. Var būt pikseļos, procentos vai auto. Noklusējums auto.
flex: īsā īpašība flex-grow, flex-shrink un flex-basis. Piemēram, flex: 1 1 auto;.
align-self: Pārraksta align-items vērtību konkrētam elementam. Iespējamās vērtības: auto (izmanto vecāka align-items), stretch, flex-start, flex-end, center, baseline.

Piemērs:

.flex-container {
  display: flex; /* Padara elementu par flex konteineru */
  flex-direction: row; /* Izvieto elementus rindā */
  justify-content: center; /* Izlīdzina elementus galvenās ass centrā */
  align-items: center; /* Izlīdzina elementus perpendikulāri galvenajai ass */
  gap: 10px; /* Nosaka attālumu starp elementiem */
}

.flex-item {
  flex-grow: 1; /* Elements var palielināties */
  flex-basis: 100px; /* Sākotnējais izmērs */
}

.special-item {
  order: -1; /* Šis elements būs pirmais */
  align-self: flex-end; /* Pārraksta izlīdzinājumu perpendikulāri galvenajai ass */
}