Как да зададете свойствата на flexbox?

Свойства се задават за контейнера (елемента, към който се прилага display: flex или display: inline-flex) и неговите директни потомци (елементите вътре в контейнера).

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

display: Определя, че елементът е flex контейнер. Възможни стойности: flex (блоков) и inline-flex (редов).
flex-direction: Определя посоката на главната ос, по която се разполагат flex елементите. Възможни стойности: 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 (равномерно разпределение около всеки елемент).
align-items: Подравнява flex елементите по перпендикулярната ос. Възможни стойности: stretch (по подразбиране, разтяга елементите по височината на контейнера), flex-start (началото), flex-end (края), center, baseline (подравняване по базовата линия на текста).
align-content: Подравнява редовете на flex елементите по перпендикулярната ос (когато се използва flex-wrap). Не действа, ако има само един ред. Възможни стойности: stretch, flex-start, flex-end, center, space-between, space-around.
gap, row-gap, column-gap: Определят разстоянието между flex елементите по главната и перпендикулярната ос.

Свойства за елементите (директните потомци на flex контейнера):

order: Определя реда на разположение на елемента в контейнера. По подразбиране всички елементи имат order: 0. Елементите с по-малка стойност order се разполагат по-рано.
flex-grow: Определя колко пъти може да се увеличи елементът спрямо другите, ако има свободно пространство. По подразбиране 0 (не се увеличава).
flex-shrink: Определя колко пъти може да се свие елементът, ако няма достатъчно място. По подразбиране 1 (се свива).
flex-basis: Определя началния размер на елемента преди разпределянето на свободното пространство. Може да бъде в пиксели, проценти или auto. По подразбиране auto.
flex: Кратка собственост за flex-grow, flex-shrink и flex-basis. Например, flex: 1 1 auto;.
align-self: Презаписва стойността на align-items за конкретния елемент. Възможни стойности: auto, stretch, flex-start, flex-end, center, baseline.

Пример:

.flex-container {
  display: flex; /* Прави елемента flex контейнер */
  flex-direction: row; /* Подрежда елементите в ред */
  justify-content: center; /* Подравнява елементите по центъра на главната ос */
  align-items: center; /* Подравнява елементите по центъра на перпендикулярната ос */
  gap: 10px; /* Задава разстояние между елементите */
}

.flex-item {
  flex-grow: 1; /* Елементът може да се увеличава */
  flex-basis: 100px; /* Начален размер на елемента */
}

.special-item {
  order: -1; /* Този елемент ще бъде първи */
  align-self: flex-end; /* Презаписва подравняването за този елемент */
}