Принуждение элемента span на всю ширину в flex-контейнере

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

Если необходимо, чтобы элемент во флекс-контейнере занял всю доступную ширину строки, установите для него свойство flex-basis равное 100% и свойство flex-grow равным 1. Таким образом, элемент займёт все свободное пространство:

.full-width-item {
  flex: 1 0 100%; /* Элемент просто обожает место и берет его весь. */
}

Затем добавьте этот элемент в flex-контейнер со свойством flex-wrap для обеспечения возможности переноса элементов:

<div style="display: flex; flex-wrap: wrap;">
  <div>Элемент 1</div>
  <div class="full-width-item">Элемент, растянутый на всю строку</div>
  <div>Элемент 3</div>
</div>

Обратите внимание, что свойство flex: 0 0 100% полезно для элементов, которые должны быть растянуты на всю позволительную ширину. Это может быть полезно для меток.

Изучаем подробнее: flex-wrap и ширина flex-элементов

Мощь flex-wrap

Свойство flex-wrap даёт возможность элементам флекс-контейнера переходить на новую строку, когда существующее пространство уже занято. Это невероятно полезно при создании адаптивного дизайна:

.container {
  display: flex;
  flex-wrap: wrap; /* Помогает когда уже тесновато для элементов. */
}

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

Динамическое изменение ширины элементов

С помощью JavaScript можно динамически изменять стили flex-элементов. Очень важно не забывать, что вызывать свойства нужно для самого контейнера, а не конкретных элементов.

document.querySelector('.container').style.flexWrap = 'wrap';

Зависимость от соседних элементов

На распределение свободного пространства влияют свойства flex-grow и flex-shrink соседних элементов. Следует быть внимательными, чтобы избежать конфликтов между элементами, которые могут посеять хаос во всём макете.

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

Каждый элемент во флекс-контейнере можно представить как домик в строке. Как правило, домики идут друг за другом. Но что, если одному из них захочется занять всю улицу?

Исходное положение: 🏠🏠[🏠]🏠🏠 
Flex-контейнер:      [=============================]

Теперь применим наш метод:

.flex-item {
  flex: 1 0 100%; /* Этот домик расширился и занял всю доступную ширину. */
}

После преобразования: [🏠🏠🏠🏠🏠]
Flex-контейнер:        [=============================]

Вуаля! Вы превратили обычный домик во всю длину улицы! 🏰

Полное руководство: использование flex-элементов и их максимальной ширины

Изменение направления flex-direction

Изменение flex-direction на row или column позволяет вам контролировать ориентацию макета. Поведение элемента, занимающего всю ширину, будет отличаться в зависимости от выбранного направления:

.container-column {
  display: flex;
  flex-direction: column; /* Теперь элементы располагаются в вертикальном порядке. */
}

Несуществующие свойства

Вопреки распространенным заблуждениям, свойства justify-self: stretch и align-self: stretch в CSS не существуют. Применяйте только корректные CSS-правила.

Адаптивный дизайн с помощью flexbox

С помощью медиа-запросов можно адаптировать свойства flex в зависимости от размера экрана, что делает эти свойства незаменимым инструментом при создании адаптивных дизайнов:

@media (max-width: 600px) {
  .full-width-item {
    flex-basis: auto; /* На экранах шириной 600 пикселей и меньше элемент перестает занимать всю ширину. */
  }
}

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

1. Основные концепции flexbox – CSS: Каскадные таблицы стилей | MDN – Прекрасный ресурс для того, чтобы разобраться в flexbox.
2. Полное руководство по Flexbox | CSS-Tricks – Энциклопедический справочник по флексбоксу.
3. CSS Flexbox (Гибкие боксы) – Интерактивные примеры для понимания работы flexbox.
4. Модуль макета CSS Flexible Box Уровень 1 – Всеобъемлющая информация о flexbox.
5. Can I use... Support tables for HTML5, CSS3, etc – Проверка совместимости, не менее важная, чем подбор подходящего наряда.
6. Flexbox – исчерпывающая шпаргалка по CSS Flex – Легкий доступ к нужным примерам кода.
7. Flexbox | Codrops – Статьи с интересными примерами.