Flexbox в CSS: Гибкое размещение элементов

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

1. display

• display: flex;: Устанавливает контейнер как флекс-контейнер.

  .container {
      display: flex;
  }

• display: inline-flex;: То же самое, что и flex, но делает контейнер строчным элементом.

  .inline-container {
      display: inline-flex;
  }

2. flex-direction

Определяет направление основной оси:

• row: Элементы располагаются горизонтально слева направо (по умолчанию).

  .container {
      flex-direction: row;
  }

• row-reverse: Элементы располагаются справа налево.

  .container {
      flex-direction: row-reverse;
  }

• column: Элементы располагаются вертикально сверху вниз.

  .container {
      flex-direction: column;
  }

• column-reverse: Элементы располагаются снизу вверх.

  .container {
      flex-direction: column-reverse;
  }

3. justify-content

Выравнивание элементов по главной оси:

• flex-start: Выровнять элементы по началу основной оси (слева/верху).

  .container {
      justify-content: flex-start;
  }

• flex-end: Выровнять элементы по концу основной оси (справа/внизу).

  .container {
      justify-content: flex-end;
  }

• center: Центрировать элементы по основной оси.

  .container {
      justify-content: center;
  }

• space-between: Равномерно распределить элементы, оставляя промежутки только между ними.

  .container {
      justify-content: space-between;
  }

• space-around: Распределять элементы равномерно, включая равные промежутки до начала и конца строки.

  .container {
      justify-content: space-around;
  }

• space-evenly: Делит свободное пространство поровну между всеми элементами, включая начало и конец строки.

  .container {
      justify-content: space-evenly;
  }

4. align-items

Выравнивание элементов по перекрестной оси:

• stretch: Растягивает элементы, заполняя всю высоту родительского контейнера (значение по умолчанию).

  .container {
      align-items: stretch;
  }

• flex-start: Выровнять элементы по верхнему краю контейнера.

  .container {
      align-items: flex-start;
  }

• flex-end: Выровнять элементы по нижнему краю контейнера.

  .container {
      align-items: flex-end;
  }

• center: Центрировать элементы по вертикали.

  .container {
      align-items: center;
  }

• baseline: Выровнять элементы по базовой линии текста.

  .container {
      align-items: baseline;
  }

5. align-content

Управление расположением строк в многострочном флексе:

• stretch: Строки растягиваются, занимая все доступное пространство.

  .container {
      align-content: stretch;
  }

• flex-start: Все строки смещаются к началу контейнера.

  .container {
      align-content: flex-start;
  }

• flex-end: Все строки смещаются к концу контейнера.

  .container {
      align-content: flex-end;
  }

• center: Центрирует строки относительно контейнера.

  .container {
      align-content: center;
  }

• space-between: Промежутки распределяются так, чтобы первая строка была у верхнего края, последняя — у нижнего, а остальные равномерно располагались между ними.

  .container {
      align-content: space-between;
  }

• space-around: Промежутки распределяются вокруг каждой строки, делая их одинаковыми.

  .container {
      align-content: space-around;
  }

6. flex-wrap

Определение поведения флекс-элементов при переполнении контейнера:

• nowrap: Не переносить элементы на новую строку (значение по умолчанию).

  .container {
      flex-wrap: nowrap;
  }

• wrap: Переносить элементы на новые строки, если они не помещаются в одну линию.

  .container {
      flex-wrap: wrap;
  }

• wrap-reverse: То же, что и wrap, но строки идут в обратном порядке.

  .container {
      flex-wrap: wrap-reverse;
  }

7. gap

Добавляет пробелы между флекс-элементами:

• gap: 10px;: Добавляет промежуток в 10 пикселей между элементами.

  .container {
      gap: 10px;
  }

• row-gap: 20px; column-gap: 30px;: Можно отдельно задать промежутки по строкам и столбцам.

  .container {
      row-gap: 20px;
      column-gap: 30px;
  }

Свойства флекс-элемента

1. order

Позволяет изменить порядок отображения элемента среди других флекс-элементов:

• order: 1;: Перемещает элемент ближе к концу.

  .item {
      order: 1;
  }

• order: -1;: Перемещает элемент ближе к началу.

  .item {
      order: -1;
  }

2. flex-grow

Определяет способность элемента увеличиваться, чтобы занять оставшееся место:

• flex-grow: 1;: Элемент будет расти пропорционально другим элементам с таким же значением.

  .item {
      flex-grow: 1;
  }

• flex-grow: 0;: Элемент не будет увеличивать свой размер.

  .item {
      flex-grow: 0;
  }

3. flex-shrink

Определяет способность элемента уменьшаться, когда места недостаточно:

• flex-shrink: 1;: Элемент будет пропорционально уменьшаться вместе с другими элементами.

  .item {
      flex-shrink: 1;
  }

• flex-shrink: 0;: Элемент не будет уменьшать свой размер.

  .item {
      flex