Make flex list items stagger into multiple lines on smaller screens

问题

I am attempting to make a css flex list stagger text onto two lines on smaller screens however nothing I've tried seems to work.

I've attempted to use spans and br at several different media queries but to no avail. Any help would be greatly appreciated.

This is how I would like it to look:

                               Text Text Text Text Text 
                                    Text  Text  Text

Here is my code

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;
}

And here is a Code pen

回答1:

try with this this stylesheet

<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>

change the margin of the li element as per your requirement and you may also set a min-width to the li elements

回答2:

An initial setting of a flex container is flex-wrap: nowrap. This means that flex items are confined to a single line and will not wrap. You can override this default with flex-wrap: wrap.

Revised Codepen

Reference:

flex-wrap definition ~ MDN (note the "Initial Value")

来源：https://stackoverflow.com/questions/37091614/make-flex-list-items-stagger-into-multiple-lines-on-smaller-screens

标签

html

css

css3

flexbox