创建一个水平环绕的垂直列表答案

【问题标题】：Create a vertical list that wraps horizontally创建一个水平环绕的垂直列表
【发布时间】：2020-10-02 00:38:01
【问题描述】：

尝试创建一个这样的列表：

https://i.gyazo.com/e9dfcd50b50670d4c9e0be94a4013c59.png

我正在使用 Bootstrap 并尝试过这样的代码，但没有成功：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-md-12 flex-wrap flex-row flex-wrap justify-start items-start">
    <ul class="d-flex flex-wrap list-unstyled">
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
        <li>Test</li>
    </ul>
</div>

【问题讨论】：

请更具体地说明“不起作用”的含义。
它不对列表中的项目进行垂直排序，它只是继续水平排列。我希望项目垂直移动，只要有足够的空间，当没有足够的空间时，水平移动到新行。
我假设当您说“排序”时，您的意思是“布局”或“渲染”。我在下面提供了一个答案，希望它能达到你的要求。
stackoverflow.com/q/43834172/3597276

标签： html css twitter-bootstrap bootstrap-4 flexbox

【解决方案1】：

默认情况下，Bootstrap 中弹性容器的方向设置为row。要实现所需的行为，您必须通过附加引导类flex-column 将ul 设置为具有column 的方向。您还需要设置此容器的高度，否则元素不需要换行到新列。

这里有一段代码 sn-p 说明了如何做，请注意这里有一些额外的样式只是为了显示目的：

ul {
    width: 200px;
    height: 150px;
    border: 1px solid black;
    box-sizing: content-box;
}

li {
    width: 100px;
    height: 30px;
}
    
li:nth-child(2n) {
    background-color: lightgrey;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-md-12 flex-wrap flex-row flex-wrap justify-start items-start">
    <ul class="d-flex flex-wrap list-unstyled flex-column">
        <li>Test 0</li>
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
        <li>Test 4</li>
        <li>Test 5</li>
        <li>Test 6</li>
        <li>Test 7</li>
        <li>Test 8</li>
        <li>Test 9</li>
    </ul>
</div>

【讨论】：

【解决方案2】：

您需要一个最大高度基准。例如，假设你想要 100% 的视口高度，使用 flexbox 方向列和 flex-wrap：

   ul {
      max-height: 100vh;
   }

   <div class="col-md-12">
        <ul class="d-flex flex-column flex-wrap list-unstyled" id="list">
            <li>Test 1</li>
            <li>Test 2</li>
            <li>Test 3</li>
            <li>Test</li>
            ...
        </ul>
    </div>

演示：https://codeply.com/p/5CBPWc59O8

【讨论】：