За какво се използва flex в CSS?

Flexbox се използва за създаване на едномерни подредби на елементи в контейнер. Позволява управление на подравняването, разпределението на пространството и реда на елементите.

Основни понятия:

• Flex контейнер: Родителски елемент, на който се задава display: flex или display: inline-flex.
• Flex елементи: Дъщерни елементи на Flex контейнера.
• Главна ос: Главната ос на Flex контейнера. Определя се с flex-direction. По подразбиране е хоризонтална (row).
• Крос ос: Перпендикулярна на главната ос.

Ключови свойства за Flex контейнера:

• display: Определя, че елементът е flex контейнер (flex или inline-flex).
• flex-direction: Задава посоката на главната ос (row, row-reverse, column, column-reverse).
• justify-content: Подрежда flex елементите по дължина на главната ос (flex-start, flex-end, center, space-between, space-around, space-evenly).
• align-items: Подрежда flex елементите по дължина на крос ос (flex-start, flex-end, center, baseline, stretch).
• flex-wrap: Определя дали flex елементите трябва да се пренареждат на нов ред/колона при недостатъчно място (nowrap, wrap, wrap-reverse).

Ключови свойства за Flex елементите:

• order: Определя визуалния ред на flex елемента (по подразбиране 0).
• flex-grow: Определя колко може да расте flex елементът спрямо другите (по подразбиране 0).
• flex-shrink: Определя колко може да се свие flex елементът спрямо другите (по подразбиране 1).
• flex-basis: Задава началния размер на flex елемента преди разпределението на свободното пространство (по подразбиране auto).
• align-self: Презаписва подравняването на flex елемента по крос ос за конкретен елемент.

Пример за използване:

.container {
  display: flex;
  justify-content: center; /* Центриране по дължина на главната ос */
  align-items: center; /* Центриране по дължина на крос ос */
  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>

Това позволява лесно центриране на елементите, създаване на отзивчиви мрежи и управление на пространството между елементите.