Какво е Flexbox?

Flexbox (Flexible Box Layout) е едномерна модел на оформление в CSS, предназначена за разпределяне на място между елементите в контейнера и мощни възможности за подравняване. Тя позволява лесно управление на размерите, реда и подравняването на дъщерните елементи (flex-елементи) вътре в родителския контейнер (flex-контейнер), независимо от техния първоначален ред или размери.

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

Flex-контейнер: Елемент с display: flex или display: inline-flex. В него се определят правилата за оформление за неговите директни деца.
Flex-елементи: Директните деца на flex-контейнера. За тях се прилагат свойства на Flexbox, които определят тяхното поведение в контейнера.
Основна ос (main axis): Оста, по която се разполагат flex-елементите. По подразбиране е хоризонтална (отляво надясно), но може да бъде променена с flex-direction.
Крос-ос (cross axis): Оста, перпендикулярна на основната.
Начало на основната ос (main start) / Край на основната ос (main end): Началото и краят по основната ос.
Начало на крос-ос (cross start) / Край на крос-ос (cross end): Началото и краят по крос-оста.

Основни свойства на Flexbox за flex-контейнера:

display: Определя, че елементът е flex-контейнер (flex или inline-flex).
flex-direction: Определя посоката на основната ос (row, row-reverse, column, column-reverse).
flex-wrap: Определя дали flex-елементите ще пренасят на нов ред/колона, ако няма място (nowrap, wrap, wrap-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).
align-content: Подравнява редовете на flex-елементите (ако има повече поради flex-wrap) по крос-ос.

Основни свойства на flex-елементите:

order: Определя реда на показване на flex-елемента (по подразбиране 0).
flex-grow: Коэффициент на растеж на flex-елемента, който определя колко може да се увеличи, за да запълни наличното пространство.
flex-shrink: Коэффициент на свиване на flex-елемента, който определя колко може да се свие, за да се избегне преливане.
flex-basis: Начален размер на flex-елемента преди разпределението на свободното пространство.
flex: Кратка форма за flex-grow, flex-shrink и flex-basis.
align-self: Презаписва align-items за конкретен flex-елемент.

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

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; /* Прави контейнера flex-контейнер */
  justify-content: center; /* Подравнява елементите по центъра на основната ос */
  align-items: center; /* Подравнява елементите по центъра на крос-ос */
  height: 200px; /* За демонстрация на подравняването */
  border: 1px solid black;
}

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

Основни предимства на Flexbox:

Лесно подравняване на елементи хоризонтално и вертикално.
Гъвкаво разпределение на пространството между елементите.
Лесна промяна на реда на елементите.
Адаптивен дизайн без използване на float и position.
Добра поддръжка в съвременните браузъри.