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

В прошлых примерах использовалось довольно мало элементов внутри флекс-контейнера. Представим, что элементов больше и они не помещаются. В этом случае элементы продолжат располагаться вдоль главной оси и выйдут за пределы контейнера.

<div class="wrap-stage wrap-stage--nowrap">
  <div class="wrap-chip">1</div>
  <div class="wrap-chip">2</div>
  <div class="wrap-chip">3</div>
  <div class="wrap-chip">4</div>
  <div class="wrap-chip">5</div>
  <div class="wrap-chip">6</div>
</div>

.wrap-stage {
  display: flex;
  gap: 12px;
  width: 320px;
  padding: 12px;
  border: 2px dashed #1d4ed8;
  background: #dbeafe;
}

.wrap-stage--nowrap {
  flex-wrap: nowrap;
}

.wrap-chip {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #0ea5e9;
}

Flex container that overflows because wrapping is disabled

Чтобы контролировать перенос, используется свойство flex-wrap, которое принимает значения:

nowrap — перенос отключен
wrap — элементы переносятся, когда не хватает места
wrap-reverse — перенос с инверсией порядка вдоль главной оси

<div class="wrap-gallery">
  <div>
    <p class="wrap-label">nowrap</p>
    <div class="wrap-stage wrap-stage--nowrap">
      <div class="wrap-chip">1</div>
      <div class="wrap-chip">2</div>
      <div class="wrap-chip">3</div>
      <div class="wrap-chip">4</div>
      <div class="wrap-chip">5</div>
      <div class="wrap-chip">6</div>
    </div>
  </div>

  <div>
    <p class="wrap-label">wrap</p>
    <div class="wrap-stage wrap-stage--wrap">
      <div class="wrap-chip">1</div>
      <div class="wrap-chip">2</div>
      <div class="wrap-chip">3</div>
      <div class="wrap-chip">4</div>
      <div class="wrap-chip">5</div>
      <div class="wrap-chip">6</div>
    </div>
  </div>

  <div>
    <p class="wrap-label">wrap-reverse</p>
    <div class="wrap-stage wrap-stage--wrap-reverse">
      <div class="wrap-chip">1</div>
      <div class="wrap-chip">2</div>
      <div class="wrap-chip">3</div>
      <div class="wrap-chip">4</div>
      <div class="wrap-chip">5</div>
      <div class="wrap-chip">6</div>
    </div>
  </div>
</div>

.wrap-gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wrap-label {
  margin: 0 0 6px;
  font-weight: 600;
}

.wrap-stage--wrap {
  flex-wrap: wrap;
}

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

nowrap, wrap y wrap-reverse comparados

Задание

В этом уроке мы снова вернёмся к стилизации блока «Вопрос-ответ». В этот раз у него жестко ограничена ширина для элементов, поэтому их стоит переносить, если недостаточно места.

<style>
.qa {
  font: 18px/1.5 sans-serif;
  display: flex;
}

.question {
  width: 400px;
  padding: 20px;

  color: #fff;
  background: #8ea7e9;
}

.answer {
  width: 400px;
  padding: 20px;
}
</style>

<div class="qa">
  <div class="question">Какие языки программирования наиболее востребованы в 2023?</div>
  <div class="answer">Самыми популярными языками для изучения в 2023 году остаются Python и JavaScript</div>
</div>

Доработайте функционал вёрстки. Проверить её можно уменьшив окно вашего браузера

Как с вами связаться? 🙃

Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект

Упражнение не проходит проверку — что делать? 😶

В моей среде код работает, а здесь нет 🤨

Мой код отличается от решения учителя 🤔

Прочитал урок — ничего не понятно 🙄

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются

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

<div class="wrap-stage wrap-stage--nowrap">
  <div class="wrap-chip">1</div>
  <div class="wrap-chip">2</div>
  <div class="wrap-chip">3</div>
  <div class="wrap-chip">4</div>
  <div class="wrap-chip">5</div>
  <div class="wrap-chip">6</div>
</div>

.wrap-stage {
  display: flex;
  gap: 12px;
  width: 320px;
  padding: 12px;
  border: 2px dashed #1d4ed8;
  background: #dbeafe;
}

.wrap-stage--nowrap {
  flex-wrap: nowrap;
}

.wrap-chip {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #0ea5e9;
}

Flex container that overflows because wrapping is disabled

Чтобы контролировать перенос, используется свойство flex-wrap, которое принимает значения:

nowrap — перенос отключен
wrap — элементы переносятся, когда не хватает места
wrap-reverse — перенос с инверсией порядка вдоль главной оси

<div class="wrap-gallery">
  <div>
    <p class="wrap-label">nowrap</p>
    <div class="wrap-stage wrap-stage--nowrap">
      <div class="wrap-chip">1</div>
      <div class="wrap-chip">2</div>
      <div class="wrap-chip">3</div>
      <div class="wrap-chip">4</div>
      <div class="wrap-chip">5</div>
      <div class="wrap-chip">6</div>
    </div>
  </div>

  <div>
    <p class="wrap-label">wrap</p>
    <div class="wrap-stage wrap-stage--wrap">
      <div class="wrap-chip">1</div>
      <div class="wrap-chip">2</div>
      <div class="wrap-chip">3</div>
      <div class="wrap-chip">4</div>
      <div class="wrap-chip">5</div>
      <div class="wrap-chip">6</div>
    </div>
  </div>

  <div>
    <p class="wrap-label">wrap-reverse</p>
    <div class="wrap-stage wrap-stage--wrap-reverse">
      <div class="wrap-chip">1</div>
      <div class="wrap-chip">2</div>
      <div class="wrap-chip">3</div>
      <div class="wrap-chip">4</div>
      <div class="wrap-chip">5</div>
      <div class="wrap-chip">6</div>
    </div>
  </div>
</div>

.wrap-gallery {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wrap-label {
  margin: 0 0 6px;
  font-weight: 600;
}

.wrap-stage--wrap {
  flex-wrap: wrap;
}

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

nowrap, wrap y wrap-reverse comparados

Задание

<style>
.qa {
  font: 18px/1.5 sans-serif;
  display: flex;
}

.question {
  width: 400px;
  padding: 20px;

  color: #fff;
  background: #8ea7e9;
}

.answer {
  width: 400px;
  padding: 20px;
}
</style>

<div class="qa">
  <div class="question">Какие языки программирования наиболее востребованы в 2023?</div>
  <div class="answer">Самыми популярными языками для изучения в 2023 году остаются Python и JavaScript</div>
</div>

Доработайте функционал вёрстки. Проверить её можно уменьшив окно вашего браузера

Коммерческий опыт и Трудоустройство

Как с вами связаться? 🙃

Команда проекта находится в телеграм-сообществе. Там можно задать любой вопрос и повлиять на проект

Упражнение не проходит проверку — что делать? 😶

В моей среде код работает, а здесь нет 🤨

Мой код отличается от решения учителя 🤔

Прочитал урок — ничего не понятно 🙄

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются

← ПредыдущийСледующий →

Ваше упражнение проверяется по этим тестам

const { test } = require('tests');

test(({ query, expect }) => {
  const flexContainer = query(document, '.qa');

  const style = getComputedStyle(flexContainer);
  expect(style).to.have.property('display', 'flex');
  expect(style).to.have.property('flex-wrap', 'wrap');
});

← ПредыдущийСледующий →

Решение учителя откроется через:

20:00

← ПредыдущийСледующий →