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 />获得水平滚动条，则框会从左到右排列成一行。

这是working example：

.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 />换行？

Answer 1

您需要将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换行

CSS flex-wrap属性指定是否强制使用flex项成一行或可以包裹在多行上。如果包装允许，此属性还允许您控制方向哪些线堆叠。

Flex列表未包装

1 个答案: