フレックスラッププロパティでアイテムを追加するとアイテムがラップされません

Question

アイテムをラップアラウンドして次の行に追加し、右側にスクロールしないようにします。

ボタンを使用してリストアイテムを追加し、手動で項目を手動でliに追加すると、アイテムは次の行に折り返されます。私はflex-wrap: wrapのプロパティをflex-boxとしています。

$('#clickMe').click(function() { 
 
    $('#ticketsDemosss').append($('<li class="flex-item">').text('sds')); 
 
});

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    -webkit-flex-direction: row; /* Safari */ 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 
.flex-item { 
 
    background: tomato; 
 
    padding: 5px; 
 
    width: 200px; 
 
    height: 150px; 
 
    margin-top: 10px; 
 
    line-height: 150px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
} 
 
ul li{ 
 
    display: inline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<dl id="viewbranchcontact-2"> 
 
<ul id="ticketsDemosss" class="flex-container"> 
 
<!-- add LI here --> 
 
</ul> 
 
</dl> 
 

 
<button id="clickMe">Click Me</button>

Answer 1

要素がインラインであり、そこに要素の間にスペースがありませんので、それは長い単語のように扱われますので、それはです。あなたのいずれか...

• は

  $('#clickMe').click(function() { 
   
      $('#ticketsDemosss').append($('<li class="flex-item">').text('sds')); 
   
  });

  .flex-container { 
   
      padding: 0; 
   
      margin: 0; 
   
      list-style: none; 
   
      -webkit-flex-direction: row; /* Safari */ 
   
      flex-direction: row; 
   
      flex-wrap: wrap; 
   
  } 
   
  .flex-item { 
   
      background: tomato; 
   
      padding: 5px; 
   
      width: 200px; 
   
      height: 150px; 
   
      margin-top: 10px; 
   
      line-height: 150px; 
   
      color: white; 
   
      font-weight: bold; 
   
      font-size: 3em; 
   
      text-align: center; 
   
      display: inline-block; 
   
  } 
   
  ul li{ 
   
      display: inline; 
   
  }

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
   
  <dl id="viewbranchcontact-2"> 
   
  <ul id="ticketsDemosss" class="flex-container"> 
   
  <!-- add LI here --> 
   
  </ul> 
   
  </dl> 
   
  
   
  <button id="clickMe">Click Me</button>

要素の間に（私は以下やった）の代わりに

プット・スペースを李さんinline-blockを作る親

にword-break: break-allを適用することができます

Answer 2

を追加する必要がありますflex-item .INクラス

$('#clickMe').click(function() { 
 
    $('#ticketsDemosss').append($('<li class="flex-item">').text('sds')); 
 
});

.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    -webkit-flex-direction: row; /* Safari */ 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
} 
 
.flex-item { 
 
    background: tomato; 
 
    padding: 5px; 
 
    width: 200px; 
 
    height: 150px; 
 
    margin-top: 10px; 
 
    line-height: 150px; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
    
 
    display: inline-flex; 
 
    box-sizing: border-box; 
 
} 
 
ul li{ 
 
    display: inline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<dl id="viewbranchcontact-2"> 
 
<ul id="ticketsDemosss" class="flex-container"> 
 
<!-- add LI here --> 
 
</ul> 
 
</dl> 
 

 
<button id="clickMe">Click Me</button>