Какие знаешь свойства flexbox

1️⃣ Как кратко ответить

Flexbox предоставляет свойства для управления расположением элементов в контейнере: display: flex, flex-direction, justify-content, align-items, align-content, flex-wrap, flex-flow, order, flex-grow, flex-shrink, flex-basis, align-self. Эти свойства позволяют гибко управлять направлением, выравниванием и распределением пространства между элементами.

2️⃣ Подробное объяснение темы

Flexbox — это мощный инструмент CSS для создания гибких макетов. Он позволяет легко управлять расположением элементов в контейнере, обеспечивая гибкость и адаптивность. Рассмотрим основные свойства flexbox и их применение.

Основные свойства Flexbox

1. display: flex

   • Применяется к контейнеру, чтобы сделать его flex-контейнером. Все его прямые потомки становятся flex-элементами.

2. flex-direction

   • Определяет направление, в котором располагаются flex-элементы.
   • Значения:
     • row (по умолчанию): элементы располагаются по горизонтали слева направо.
     • row-reverse: элементы располагаются по горизонтали справа налево.
     • column: элементы располагаются по вертикали сверху вниз.
     • column-reverse: элементы располагаются по вертикали снизу вверх.

3. justify-content

   • Управляет распределением свободного пространства и выравниванием элементов по основной оси.
   • Значения:
     • flex-start (по умолчанию): элементы прижаты к началу контейнера.
     • flex-end: элементы прижаты к концу контейнера.
     • center: элементы центрированы.
     • space-between: равномерное распределение элементов с первым элементом у начала, а последним у конца.
     • space-around: равномерное распределение элементов с равными отступами вокруг каждого элемента.

4. align-items

   • Определяет выравнивание элементов по поперечной оси.
   • Значения:
     • stretch (по умолчанию): элементы растягиваются, чтобы заполнить контейнер.
     • flex-start: элементы выравниваются по началу контейнера.
     • flex-end: элементы выравниваются по концу контейнера.
     • center: элементы центрируются.
     • baseline: элементы выравниваются по базовой линии текста.

5. align-content

   • Управляет распределением пространства между строками в контейнере с несколькими строками.
   • Значения аналогичны justify-content.

6. flex-wrap

   • Определяет, как элементы переносятся на новую строку.
   • Значения:
     • nowrap (по умолчанию): все элементы располагаются в одной строке.
     • wrap: элементы переносятся на новую строку по мере необходимости.
     • wrap-reverse: элементы переносятся на новую строку в обратном порядке.

7. flex-flow

   • Сокращенное свойство для flex-direction и flex-wrap.

Свойства для flex-элементов

1. order

   • Определяет порядок отображения элементов. Элементы с меньшим значением отображаются раньше.

2. flex-grow

   • Определяет, как элемент будет расти относительно других элементов в контейнере.

3. flex-shrink

   • Определяет, как элемент будет сжиматься относительно других элементов в контейнере.

4. flex-basis

   • Определяет начальный размер элемента до распределения свободного пространства.

5. align-self

   • Переопределяет значение align-items для конкретного элемента.

Пример использования

.container {
  display: flex; /* Делает контейнер flex-контейнером */
  flex-direction: row; /* Элементы располагаются по горизонтали */
  justify-content: space-between; /* Элементы равномерно распределены с отступами */
  align-items: center; /* Элементы центрированы по вертикали */
}
​
.item {
  flex-grow: 1; /* Каждый элемент занимает равное пространство */
  flex-basis: 100px; /* Начальный размер элемента */
}

• display: flex делает .container flex-контейнером.
• flex-direction: row располагает элементы по горизонтали.
• justify-content: space-between распределяет элементы с равными отступами.
• align-items: center центрирует элементы по вертикали.
• flex-grow: 1 позволяет элементам равномерно расти, занимая доступное пространство.
• flex-basis: 100px задает начальный размер каждого элемента.