Как расположить 2 элемента в ряд с Flexbox: решение

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

Чтобы создать двухколоночный макет с применением flexbox, присвойте контейнеру следующие свойства: display: flex; flex-wrap: wrap;. Для элементов внутри контейнера установите свойство flex-basis: 50%;. Это позволит каждому элементу занимать именно половину ширины контейнера.

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex-basis: 50%;
  box-sizing: border-box;
}

<div class="container">
  <div class="item">Элемент 1 (теперь в паре с соседом!)</div>
  <div class="item">Элемент 2 (вдвоём веселее!)</div>
</div>

Полученный результат — гибкий и правильно функционирующий двухколоночный макет, основанный на flexbox.

Суть свойства flex-basis

Свойство flex-basis устанавливает начальный размер элемента до того, как flex-механизм распределит остальное доступное пространство. В данном случае flex-basis: 50%; означает, что каждый элемент занимает изначально половину ширины контейнера.

Применение box-sizing

Свойство box-sizing: border-box; позволяет учесть внутренние отступы и границы элементов сразу в рамках заданной ширины, исключая возможность выхода элементов за пределы и облегчая манипуляции с размерами.

Обеспечение адаптивности

Процентные значения ширины элементов обеспечивают адаптивность макета: элементы масштабируются в соответствии с размером контейнера, что особенно важно при переменности размеров экрана.

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

Представим, что у вас есть комната, в которой расположены четыре предмета мебели:

Комната: 🛋️🪑🛏️🪑 (4 предмета)

Вы применяете flexbox и задаёте:

- 📏 Направление расположения:
  🎚️ **строка**
- ⚖️ Количество элементов в строке:
  🎚️ **2**

В результате получается:

Было неудобно: 🛋️🪑🛏️🪑

Стало с flexbox:

🛋️🪑
🛏️🪑

Добро пожаловать в Гибкоград — где даже мебель умеет распределяться по два элемента в ряд!

Применение адаптивности

Flexbox идеально подходит для создания адаптивного дизайна. Используйте медиа-запросы для настройки макета под различные экраны и условия. Например, для мобильных устройств более предпочтительно использовать одноколоночный макет:

@media (max-width: 600px) {
  .item {
    flex-basis: 100%;
  }
}

Создание промежутков

Свойство margin поможет создать пробелы между элементами. Поскольку оно не учитывается в box-sizing: border-box;, отступы добавляются сверху предустановленной ширины элемента, что значительно упрощает организацию пространства.

Как избежать распространенных ошибок

Перенос элементов в узких контейнерах

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

Подробнее об этом расскажет наш спикер на видео

Справляемся с дробными ширинами

Различия в рендеринге подпиксельных значений в разных браузерах могут создать проблемы с единообразием. Для предотвращения этих недостатков применяйте округление ширин или другие подходы.

Избегание злоупотребления таблицами

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

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

1. Полное руководство по Flexbox | CSS-Tricks — Обширное руководство, включающее примеры использования Flexbox.
2. Основные концепции flexbox – CSS: Cascading Style Sheets | MDN — Учебник от MDN о ключевых принципах Flexbox.
3. Flexbox Froggy – игра для изучения CSS flexbox — Интерактивная игра для освоения Flexbox.
4. CSS Flexbox (Гибкое Боксирование) — Учебник о Flexbox от W3Schools.
5. Наглядное руководство по свойствам CSS3 Flexbox | DigitalOcean — Визуальное руководство по свойствам Flexbox.
6. Flexbox | Codrops — Особенности Flexbox.
7. Решено с помощью Flexbox — Чистый CSS без хаков — Примеры решения различных задач макетирования с применением Flexbox.