Kuidas määrata flexboxi omadused?

Konfigureeritakse omadused konteinerile (elemendile, millele raksturitakse display: flex või display: inline-flex) ning selle otse järglastele (sisesed elemendid).

Konteineri omadused:

• display: Määrab, et element on flex-konteiner. Võimalikud väärtused: flex (plokk) ja inline-flex (rida).
• flex-direction: Määrab põhijoonelise telje suuna, millel flex-elemendid paiknevad. Võimalikud väärtused: row (vaikimisi, vasakult paremale), row-reverse (paremalt vasakule), column (üles-alla), column-reverse (alla-üles).
• flex-wrap: Kontrollib, kas flex-elemendid murravad uuele reale, kui need ületavad konteineri piirid. Võimalikud väärtused: nowrap (vaikimisi, ei murru), wrap (murrab uuele reale), wrap-reverse (murrab uuele reale tagurpidi).
• justify-content: Joondab flex-elemendid põhijoonel. Võimalikud väärtused: flex-start (konteineri algus), flex-end (konteineri lõpp), center, space-between (ühtlased vahed), space-around (ühtlased vahed ümber iga elemendi).
• align-items: Joondab flex-elemendid risti põhijoonega. Võimalikud väärtused: stretch (vaikimisi, venitab elemendid konteineri kõrgusele), flex-start (konteineri algus), flex-end (konteineri lõpp), center, baseline (joondab teksti baasjoonega).
• align-content: Joondab flex-elemendiridu (kui kasutatakse flex-wrap) risti põhijoonega. Ei kehti, kui on ainult üks rida. Võimalikud väärtused: stretch (vaikimisi), flex-start, flex-end, center, space-between, space-around.
• gap, row-gap, column-gap: Määrab vahemaa flex-elemendid vahel põhijoonel ja risti põhijoonega.

Elementidele (otsesed flex-konteineri lapsed) kehtivad järgmised omadused:

• order: Määrab elemendi järjestuse konteineris. Vaikimisi on kõigil order: 0. Väiksem order väärtus tähendab, et element on eespool.
• flex-grow: Määrab, mitu korda element võib kasvada, kui on vaba ruumi. Vaikimisi 0 (ei kasva).
• flex-shrink: Määrab, mitu korda element võib väheneda, kui ruumi on vähe. Vaikimisi 1 (väheneb).
• flex-basis: Määrab algse suuruse enne vaba ruumi jaotamist. Võib olla pikslites, protsentides või auto. Vaikimisi auto.
• flex: lühivorm flex-grow, flex-shrink ja flex-basis. Näiteks flex: 1 1 auto;.
• align-self: Ülekirjutab align-items väärtuse konkreetsele elemendile. Võimalikud väärtused: auto (kasutab vanema align-items), stretch, flex-start, flex-end, center, baseline.

Näide:

.flex-container {
  display: flex; /* Muudab elemendi flex-konteineriks */
  flex-direction: row; /* Paigutab elemendid reas */
  justify-content: center; /* Joondab elemendid põhijoone keskpunkti */
  align-items: center; /* Joondab elemendid risti põhijoonega */
  gap: 10px; /* Määrab vahemaa elementide vahel */
}

.flex-item {
  flex-grow: 1; /* Element võib kasvada */
  flex-basis: 100px; /* Algne suurus */
}

.special-item {
  order: -1; /* See element on esimene */
  align-self: flex-end; /* Ülekirjutab joondamise risti põhijoonega */
}