Kam paredzēts flex CSS?

Flexbox tiek izmantots, lai izveidotu vienvirziena elementu izvietojumu konteinerā. Tas ļauj pārvaldīt izlīdzinājumu, telpas sadali un elementu kārtību.

Galvenās jēdzieni:

• Flex Container: Vecāku elements, kam piešķirts display: flex vai display: inline-flex.
• Flex Items: Flex Container bērni.
• Main Axis: Galvenā ass Flex Container. Nosaka flex-direction īpašība. Noklusējuma ir horizontāla (row).
• Cross Axis: Sānu ass, perpendikulāra Main Axis.

Galvenās īpašības Flex Container:

• display: Nosaka, vai elements ir flex konteiners (flex vai inline-flex).
• flex-direction: Nosaka galvenās ass virzienu (row, row-reverse, column, column-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 sānu asi (flex-start, flex-end, center, baseline, stretch).
• flex-wrap: Nosaka, vai flex elementi pāriet jaunā rindā vai kolonnā, ja vietas nepietiek (nowrap, wrap, wrap-reverse).

Galvenās īpašības Flex Items:

• order: Nosaka vizuālo kārtību (pēc noklusējuma 0).
• flex-grow: Nosaka, cik ļoti elements var palielināties salīdzinājumā ar citiem (0).
• flex-shrink: Nosaka, cik ļoti elements var samazināties salīdzinājumā ar citiem (1).
• flex-basis: Nosaka sākotnējo izmēru pirms brīvās telpas sadales (auto).
• align-self: Pārraksta individuālo elementa izlīdzinājumu sānu asi.

Piemērs:

.container {
  display: flex;
  justify-content: center; /* Izlīdzinājums centrā gar galveno asi */
  align-items: center; /* Izlīdzinājums centrā gar sānu asi */
  height: 200px;
  border: 1px solid black;
}

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

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Tas ļauj viegli centrēt elementus, veidot pielāgotas režģus un pārvaldīt telpu starp elementiem.