Гибкие списки не переносятся

Question

У меня, казалось бы, простое требование: список <ul /> предметов <div /> с фиксированного размера.Элементы в списке должны располагаться слева направо, заполняя доступное пространство перед переносом на следующую строку.

Вот основной HTML

<ul class="list-unstyled d-flex">
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  ......
</ul>

Класс .d-flex просто:

.d-flex {
    display: flex !important;
}

и класс .list-box просто контролирует размеры ящиков.

Что происходит, если ящики располагаются в один ряд слева направо, если их слишком много?много полей для ширины экрана <ul /> получает горизонтальную полосу прокрутки.

Вот рабочий пример :

.list-box {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin: 2px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<h1>Bootstrap 4 Flex List</h1>
<ul class="list-unstyled d-flex">
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
  <li>
    <div class="list-box"></div>
  </li>
</ul>

Почему бы не обернуть <li /> s?

Answer 1

Краткий ответ: по умолчанию элементы в макете flexbox не переносятся.Свойство flex-wrap по умолчанию имеет значение nowrap.Если установить значение wrap, элементы будут перенесены так, как вы намереваетесь.

.d-flex {
    display: flex !important;
    flex-wrap: wrap; /* add this */
}

---

Кроме того, вы можете полностью избавиться от макета flexbox.Просто установите элементы списка на display как inline-block.Они будут размещаться один за другим и переноситься на новые строки по мере необходимости.

.my-list {
  padding: 0;
  list-style-type: none;
}

.my-list li {
  display: inline-block;
}

.list-box {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  margin: 2px;
}

<h1><strike>Bootstrap 4 Flex</strike> List</h1>
<ul class="my-list">
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
</ul>

Это старый добрый CSS 2. Вам даже не нужен Bootstrap.

Answer 2

вам нужно использовать flex-wrap класс с d-flex. codepen

<ul class="list-unstyled d-flex flex-wrap">
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  <li><div class="list-box"></div></li>
  ......
</ul>

О Flex wrap

Свойство CSS flex-wrap указывает, будут ли элементы Flex смещены в одну строкуили может быть обернут на несколько строк.Если перенос разрешен, это свойство также позволяет вам контролировать направление, в котором строки укладываются.