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

Flexbox се използва за създаване на гъвкави и адаптивни оформления в CSS. Той позволява лесно подравняване и разпределяне на елементите вътре в контейнера, като автоматично регулира техните размери и позиция в зависимост от наличното пространство.

Основни концепции на Flexbox:

• Flex контейнер: Елемент, към който се прилага display: flex; или display: inline-flex;. Той съдържа flex елементи.
• Flex елементи: Директни деца на flex контейнера.

Flexbox позволява контрол върху:

• Посоката на разположение на елементите (flex-direction).
• Прехода на елементите към следващия ред/колона (flex-wrap).
• Подравняването на елементите по дължината на основната ос (justify-content).
• Подравняването на елементите по перпендикулярната ос (align-items за отделни елементи и align-content за няколко реда/колони).
• Поръчката на показване на елементите (order).
• Разпределението на свободното пространство между елементите (flex-grow, flex-shrink, flex-basis).

Пример за основна употреба:

.контейнер {
  display: flex;
  justify-content: center; /* Центриране по хоризонтала */
  align-items: center; /* Центриране по вертикала */
}

.елемент {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

<div class="контейнер">
  <div class="елемент"></div>
  <div class="елемент"></div>
  <div class="елемент"></div>
</div>