Flexbox چیست؟

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

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

• Основна ос (main axis): Ос, по която се разполагат елементите. По подразбиране е хоризонтална (отляво надясно).
• Поперечна ос (cross axis): Оса, перпендикулярна на основната ос. По подразбиране е вертикална (отгоре надолу).
• Контейнер (flex container): Елемент, към който се прилагат свойствата на Flexbox (display: flex или display: inline-flex).
• Елементи (flex items): Дъщерни елементи на контейнера.

Свойства за Flex-контейнера:

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

Свойства за Flex-елементите:

• order: Определя реда на елемента в контейнера
• flex-grow: Определя колко трябва да се увеличи елементът, за да заеме наличното пространство
• flex-shrink: Определя колко трябва да се свие елементът, ако няма достатъчно място
• flex-basis: Определя началния размер на елемента преди разпределението на пространството
• flex: съкратено свойство за flex-grow, flex-shrink и flex-basis
• align-self: Переопределя подравняването на елемента по поперечната ос (flex-start, flex-end, center, baseline, stretch, auto)

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

/* Контейнер */
.container {
  display: flex; /* Включва flexbox */
  flex-direction: row; /* Елементите се разполагат в редица */
  justify-content: center; /* Подравняване по центру хоризонтално */
  align-items: center; /* Подравняване по центру вертикално */
  height: 200px; /* Задаваме височината на контейнера */
  border: 1px solid black;
}

/* Елементи */
.item {
  width: 50px;
  height: 50px;
  background-color: lightblue;
  margin: 5px;
}

Flexbox значително улеснява създаването на адаптивни оформления в сравнение с традиционните методи (float, inline-block, table).