Kas ir Flexbox?

Flexbox (Elastīga kaste izvietojums) — tas ir CSS modulis, kas paredzēts sarežģītu un pielāgojamu izkārtojumu veidošanai. Tas ļauj pārvaldīt elementu izvietojumu, izlīdzināšanu un telpas sadali starp konteineru elementiem, pat ja to izmēri ir nezināmi vai dinamiski.

Flexbox galvenās koncepcijas:

• Galvenā ass (main axis): ass, pa kuru izvietoti elementi. Noklusējuma ir horizontāla (no kreisās uz labo pusi).
• Perpendikulārā ass (cross axis): ass, kas ir perpendikulāra galvenajai asij. Noklusējuma ir vertikāla (no augšas uz leju).
• Konteineris (flex container): elements, kam piemēro Flexbox īpašības (display: flex vai display: inline-flex).
• Elementi (flex items): bērnu elementi konteinerā.

Flex konteineru īpašības:

• display: flex vai inline-flex
• flex-direction: nosaka galvenās ass virzienu (row, row-reverse, column, column-reverse)
• flex-wrap: nosaka, vai elementi pārslēgsies jaunā rindā (nowrap, wrap, wrap-reverse)
• justify-content: elementu izlīdzināšana gar galveno asi (flex-start, flex-end, center, space-between, space-around, space-evenly)
• align-items: elementu izlīdzināšana gar perpendikulāro asi (flex-start, flex-end, center, baseline, stretch)
• align-content: rindu vai kolonnu izlīdzināšana gar perpendikulāro asi daudzrindu konteinerā (flex-start, flex-end, center, space-between, space-around, stretch)

Flex elementu īpašības:

• order: elementa kārtība konteinerā
• flex-grow: cik daudz elementam jāpaplašinās, lai aizpildītu pieejamo telpu
• flex-shrink: cik daudz elementam jāsašaurinās, ja vietas ir maz
• flex-basis: sākotnējais izmērs pirms telpas sadales
• flex: īsāks veids flex-grow, flex-shrink un flex-basis
• align-self: atšaujas no align-items individuālam elementam (flex-start, flex-end, center, baseline, stretch, auto)

Piemērs:

/* Konteineris */
.container {
  display: flex; /* Iespējo flexbox */
  flex-direction: row; /* Elementi izvietoti rindā */
  justify-content: center; /* Horizontāla izlīdzināšana uz centru */
  align-items: center; /* Vertikāla izlīdzināšana uz centru */
  height: 200px; /* Konteineru augstums */
  border: 1px solid black;
}

/* Elementi */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Flexbox ievērojami atvieglo pielāgojamu izkārtojumu veidošanu salīdzinājumā ar tradicionālajām metodēm (float, inline-block, table).