行包装盒中的嵌套列柔性盒
我在这里有一个嵌套弹性框的页面：http://jsfiddle.net/fr0/6dqLh30d/
<div class="flex-group">
<ul class="flex-container red">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
</ul>
<ul class="flex-container gold">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<ul class="flex-container blue">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
<li class="flex-item">8</li>
</ul>
<div>
和（相关）CSS：
.flex-group {
display: flex;
flex-direction: row;
height: 500px;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
display: flex;
flex-direction: column;
flex-wrap: wrap;
flex: 0 0 auto;
}
.flex-item {
padding: 5px;
width: 100px;
height: 100px;
margin: 10px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
外部柔性盒（ .flex-group ）意图.flex-group 。 内部柔性盒（ .flex-container ）意味着从上到下进行布局，并且如果没有足够的空间（在我的jsfiddle中没有），应该包装。 我想要发生的事情是，当包装发生时， .flex-container将在X方向上生长。 但是这没有发生。 相反，容器溢出。
我想让它看起来像（在Chrome中）：https：//dl.dropboxusercontent.com/u/57880242/flex-good.png
有没有办法让.flex-container在X方向上适当调整大小？ 我不想对它们的宽度进行硬编码，因为出现在这些列表中的项目是动态的。
我已经玩了几分钟了，我想我已经找到了你想要的东西。
这是CSS
.flex-group {
margin: auto;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.flex-container {
flex: 0 1 auto;
display: flex;
flex-flow: row wrap;
align-items: space-around;
align-content: flex-start;
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
}
.red li {
background: red;
}
.gold li {
background: gold;
}
.blue li {
background: deepskyblue;
}
.flex-item {
flex: 0 1 auto;
padding: 5px;
width: 100px;
height: 100px;
margin: 10px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
这里有一个更新的小提琴来看它在行动。
有趣的是，我也摆弄它。 我已经给flex容器一个flex：1 100％; 这将容器均匀地分配到100％; 无论您如何调整窗户的大小，这些块都会在自己的容器空间中流动，并且容器保持相同的高度和重量。
.flex-container {
flex: 0 100%;
display: flex;
flex-flow: row wrap;
align-items: space-around;
align-content: flex-start;
padding: 0;
margin: 0;
list-style: none;
border: 1px solid silver;
}
在这里看到小提琴
链接地址: http://www.djcxy.com/p/75689.html