项目不会被添加更多的项目与柔性包装属性

Question

我希望添加的项目环绕并添加到下一行，而不是滚动到右侧。

如果我不使用按钮添加列表项目，并且只是手动添加项目到li，项目将换行到下一行。我已使用flex-box的flex-wrap: wrap财产。

$('#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

这是因为该元素是内联和存在的元素之间没有空格，所以它像一个长字处理。您可以...

• 适用word-break: break-all父
• 使元素之间的李时珍inline-block，而不是（我在下面做的）
• 加空格

$('#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>

Answer 2

您需要添加display: inline-flex; box-sizing: border-box;。在flex-item类

$('#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>