Практическое применение Flexbox

Инлайн списки

Одно из основных применений Flexbox — инлайн списки.

Представьте, что у вас есть список элементов, которые нужно отобразить не в виде стандартного маркированного списка, а в виде строки…

<ul class="list-inline">
  <li>Merlin</li>
  <li>Ursula</li>
  <li>Radagast</li>
</ul>

Для этого можно использовать Flexbox.

Для инлайн списков можно установить flex-wrap значение wrap. Кроме того, мне нравится выравнивать элементы по центру, но это выбор стиля, который может варьироваться от проекта к проекту.

Значение свойства list-style-type, установленное как пустая строка (""), удаляет буллеты, сохраняя семантику списка.

.list-inline {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  align-items: center;
  list-style-type: "";
  margin-left: 0;
}

See the Pen

Классы модификаторов инлайн списков

Мой любимый подход к архитектуре CSS, HUG CSS, активно использует классы-модификаторы, чтобы подгонять и настраивать компоненты.

Для .list-inline я часто добавляю классы-модификаторы для изменения расстояния между элементами списка, а также классы модификации выравнивания.

.list-inline-spaced {
  column-gap: 2.875em;
}

.list-inline-compact {
  column-gap: 0.5em;
}

.list-inline-center {
  justify-content: center;
}

.list-inline-end {
  justify-content: flex-end;
}

See the Pen

Навигационные меню

Ещё одна вещь, для которой я активно использую Flexbox, — это навигационные меню.

Часто для этого хватает класса .list-inline. Но для меню, подобного тому, что находится в верхней части моего сайта, я создаю отдельный класс, чтобы контролировать отношения между логотипом и элементами навигации.

В данном случае используется класс .nav-list вместе с классом .list-inline.

<nav class="nav-list">
  <a href="/">Go Make Things</a>
  <ul class="list-inline">
    <li><a href="/about">About</a></li>
    <li><a href="/articles">Daily Tips</a></li>
    <li><a href="/resources">Resources</a></li>
  </ul>
</nav>

У нас уже есть .list-inline. Давайте теперь создадим стиль .nav-list.

Для этого макета часто используется свойство justify-content: space-between, чтобы сдвинуть логотип на одну сторону, а элементы навигации — на другую.

.nav-list {
  display: flex;
  justify-content: space-between;
}

See the Pen

• HUG CSS, как я подхожу к архитектуре CSS
• Введение в Flexbox