html - 使 flex 列表元素在较小的屏幕上交错成多行

Question

我正在尝试在较小的屏幕上将 css flex list 交错文本排成两行，但我尝试过的任何方法似乎都不起作用。

我尝试在几个不同的媒体查询中使用 span 和 br 但无济于事。任何帮助将不胜感激。

这是我希望它看起来的样子:

                               Text Text Text Text Text 
                                    Text  Text  Text 

这是我的代码

HTML

<div class="div">
        <h1 class="text-center">List</h1>
        <ul id ="list">
          <li>One</li>
          <li>Two</li>
          <li>Three</li>
          <li>Four</li>
          <li>Five</li>
          <li>Six</li>
          <li>Seven</li>
          <li>Eight</li>
        </ul>
    </div>

CSS

.div {
  width: 100%;
  height: 225px;
  background-color: #dbdbdb;
  white-space: normal;
  background-attachment: fixed;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  font-size: 30px;
}
.div h1 {
  font-size: 70px;
  color: black;
  font-family: "Helevtica";
  position: relative;
  top: -15px;
}
#list li {
  position: relative;
  bottom: -25px;
  color: black;
}

#list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  list-style-type: none;
  padding-right: 25px;
}

这是一个 Code pen

Answer 1

flex 容器的初始设置是flex-wrap: nowrap。这意味着 flex 元素被限制在一行中并且不会换行。您可以使用 flex-wrap: wrap 覆盖此默认值。

Revised Codepen

引用:

• flex-wrap definition ~ MDN(注意“初始值”)