フレックスリストの項目を小さな画面で複数の行にずらす

Question

小さな画面で2行にCSSのフレックスリストをずらすようにしていますが、何も試したことがないようです。

複数の異なるメディアクエリでスパンと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

はこのこのスタイルシート

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

Answer 2

フレックスの初期設定に最小幅を設定することができコンテナはflex-wrap: nowrapです。つまり、フレックスアイテムは1行に限定され、折り返されません。この既定値はflex-wrap: wrapで上書きできます。

Revised Codepen

参考：

• flex-wrap definition〜MDN（ "初期値" に注意してください）