Вывод 3 колонок в ряд с помощью flexbox в CSS

Быстрый ответ

Воспользуйтесь возможностями Flexbox! Для контейнера установите свойство display: flex;, а для каждого элемента внутри – flex: 1; max-width: 33.33%;:

<div style="display: flex; flex-wrap: wrap;">
  <div style="flex: 1; max-width: 33.33%;">Колонка 1</div>
  <div style="flex: 1; max-width: 33.33%;">Колонка 2</div>
  <div style="flex: 1; max-width: 33.33%;">Колонка 3</div>
  <!-- Аналогичный шаблон применим для будущих элементов -->
</div>

Сочетание flex: 1; max-width: 33.33%; гарантирует, что колонки не превысят треть доступной ширины.

Раскрываем тайны Flexbox

Flexbox может казаться запутанным, но разберёмся. Установка flex-basis: 33%; определит начальный размер колонки, равный трети ширины контейнера.

div {
  flex: 1 0 33%; /* Основа формирования колонок */
}

Для визуального выделения, используйте псевдоклассы nth-child для стилизации четных и нечетных элементов:

div:nth-child(odd) {
  background-color: #e3e3e3; /* Деликатно */
}
div:nth-child(even) {
  background-color: #f7f7f7; /* Сдержанно */
}

Чтобы выстроить элементы по высоте в ряд, установите align-items: stretch; в CSS – и колонки станут равны по высоте.

Открываем CSS Grid

CSS Grid предлагает больше возможностей для размещения элементов:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

Свойство grid-template-columns упрощает определение количества колонок.

Создаем адаптивные макеты

Чтобы ваши макеты правильно отображались на разных экранах, используйте медиа-запросы и Bootstrap для контроля над расположением колонок:

@media (max-width: 600px) {
  .container {
    grid-template-columns: repeat(2, 1fr); /* Если места становится меньше */
  }
}

Визуализация

Представьте ряды элементов как наборы величественных реликвий:

Реликвия = [🪄⚡💍] Ряд 1
Реликвия = [🪄⚡💍] Ряд 2
Реликвия = [🪄⚡💍] Ряд 3

Перенесённые в HTML, каждый такой набор будет представлен колонкой, а каждый ряд ждёт своего часа:

<div class="container">
  <div class="row">
    <div class="column">🪄</div> <!-- Палочка -->
    <div class="column">⚡</div> <!-- Плащ -->
    <div class="column">💍</div> <!-- Камень -->
  </div>
  <!-- При необходимости добавьте больше рядов -->
</div>

В итоге получается качественная сетка.

Примеры для наглядности

Проиллюстрируем отмеченные концепции несколькими отличными примерами на jsfiddle:

• Пример использования Flexbox – https://jsfiddle.net/flexbox_three_columns/
• Пример с Grid Layout – https://jsfiddle.net/grid_three_columns/
• Пример использования Bootstrap – https://jsfiddle.net/bootstrap_three_columns/

Помните: самое важное – практика!

Гибкость и адаптивность

В современном веб-дизайне важно быть гибким:

• Используйте процентные значения для задания ширины;
• Помните о главной догме: контент – это закон, а блочная модель его служительница;
• Тестируйте свои макеты в разных браузерах и на разных устройствах.

Полезные материалы

1. Полное руководство по Flexbox | CSS-Tricks – Ваш спутник в мире Flexbox!
2. Система сеток · Bootstrap – Раскройте возможности сетки Bootstrap.
3. Макет сетки CSS – MDN – Полное погружение в CSS Grid с MDN.
4. Множественные столбцы CSS – Освойте множественные колонки на W3Schools.
5. Основы адаптивного веб-дизайна | web.dev – Пройдите курс основ адаптивного дизайна от Google.
6. Шпаргалка по Flex – Ваш навигатор по миру Flex!
7. columns | CSS-Tricks – Всё об управлении колонками с CSS-Tricks!