Kam paredzēts Flexbox?

Flexbox tiek CSS izstrādē tiek izmantots, lai izveidotu elastīgas un pielāgojamas izkārtojumus. Tas ļauj viegli izlīdzināt un sadalīt elementus konteinerā, automātiski pielāgojot to izmērus un pozīciju atkarībā no pieejamās vietas.

Flexbox galvenās koncepcijas:

• Flex konteineris: Elements, kam tiek piemērots display: flex; vai display: inline-flex;. Tas satur flex elementus.
• Flex elementi: Tieši bērni flex konteinerim.

Flexbox ļauj kontrolēt:

• Elementu izvietojuma virzienu (flex-direction).
• Elementu pāreju uz nākamo rindu/kolonnu (flex-wrap).
• Elementu izlīdzinājumu gar galveno asi (justify-content).
• Elementu izlīdzinājumu gar perpendikulāro asi (align-items un align-content).
• Elementu parādīšanas kārtību (order).
• Brīvās vietas sadalījumu starp elementiem (flex-grow, flex-shrink, flex-basis).

Pamatpiemērs:

.konteiners {
  display: flex;
  justify-content: center; /* Horizontāla centrēšana */
  align-items: center; /* Vertikāla centrēšana */
}

.elements {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

<div class="konteiners">
  <div class="elements"></div>
  <div class="elements"></div>
  <div class="elements"></div>
</div>