Question

我试图在较小的屏幕上将css flex列表错开文本放到两行上，但我尝试过的任何内容似乎都无法正常工作。

我尝试在几个不同的媒体查询中使用跨度和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（注意＆＃34;初始值＆＃34;）

Answer 2

尝试使用此样式表

<style>
        .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 {
            margin-right: 2em;
            position: relative;
            bottom: -25px;
            color: black;
        }

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

    </style>

根据您的要求更改li元素的边距，您也可以为li元素设置最小宽度

使弹性列表项在较小的屏幕上错开多行

2 个答案: