Kas ir Flexbox?

Flexbox (Elastiskais kasteņu izkārtojums) ir vienmērīgs CSS modeļa veids, kas paredzēts vietas sadalei starp elementiem konteinerā un ar spēcīgām izlīdzināšanas iespējām. Tas ļauj viegli pārvaldīt izmērus, kārtību un izlīdzinājumu bērnu elementiem (flex elementiem) iekšā vecāku konteinerā (flex konteinerā), neatkarīgi no to sākotnējās kārtības vai izmēriem.

Flexbox galvenās koncepcijas:

• Flex konteineris: elements, kam ir uzstādīts display: flex vai display: inline-flex. Tieši šajā konteinerā tiek noteikti maketa noteikumi tā tiešajiem bērnu elementiem.
• Flex elementi: tiešie flex konteineru bērni. Tiem tiek piemērotas Flexbox īpašības, kas nosaka to uzvedību konteinerā.
• Galvenā ass (main axis): ass, pa kuru izvietoti flex elementi. Parasti horizontāla (no kreisās uz labo), bet var tikt mainīta ar flex-direction.
• Perpendikulārā ass (cross axis): ass, perpendikulāra galvenajai asij.
• Galvenais sākums (main start) / Galvenais beigas (main end): sākums un beigas gar galveno asi.
• Perpendikulārais sākums (cross start) / Perpendikulārais beigas (cross end): sākums un beigas gar perpendikulāro asi.

Flexbox galvenās īpašības flex konteineriem:

• display: nosaka, ka elements ir flex konteineris (flex vai inline-flex).
• flex-direction: nosaka galvenās ass virzienu (row, row-reverse, column, column-reverse).
• flex-wrap: nosaka, vai flex elementi pāries uz jaunu rindu/kolonu, ja vietas nepietiek (nowrap, wrap, wrap-reverse).
• justify-content: izlīdzina flex elementus gar galveno asi (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: izlīdzina flex elementus gar perpendikulāro asi (flex-start, flex-end, center, baseline, stretch).
• align-content: izlīdzina flex elementu līnijas (ja ir vairākas) gar perpendikulāro asi.

Flex elementu galvenās īpašības:

• order: nosaka flex elementa parādīšanās kārtību (noklusējums 0).
• flex-grow: augšanas koeficients, kas nosaka, cik ļoti elements var palielināties, aizpildot pieejamo telpu.
• flex-shrink: saraušanās koeficients, kas nosaka, cik ļoti elements var samazināties, lai izvairītos no pārpildes.
• flex-basis: sākotnējais izmērs, pirms tiek sadalīta brīvā telpa.
• flex: īss veids flex-grow, flex-shrink un flex-basis.
• align-self: pārdefinē align-items konkrētam flex elementam.

Piemērs lietošanai:

HTML:

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

CSS:

.flex-container {
  display: flex; /* Padara konteineru par flex konteineru */
  justify-content: center; /* Izlīdzina elementus pēc centra galvenajā asī */
  align-items: center; /* Izlīdzina elementus pēc centra perpendikulārajā asī */
  height: 200px; /* Demonstrācijai izlīdzināšanas */
  border: 1px solid black;
}

.flex-item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 10px;
}

Flexbox galvenās priekšrocības:

• Ērta elementu izlīdzināšana horizontāli un vertikāli.
• Elastīga telpas sadale starp elementiem.
• Vienkārša elementu kārtības maiņa.
• Reaģējošs dizains bez float un pozicionēšanas izmantošanas.
• Labs atbalsts mūsdienu pārlūkprogrammās.