Question

bellow是一段代码片段。我想要做的是让每个ul里面的li都有相同的高度。由于我们的目标是移动设备，因此需要响应式解决方案。

HTML：

<div class="outer-container">
<ul class="flex-container">
    <li class="flex-item">flex item 1</li>
    <li class="flex-item">flex item 2</li>
    <li class="flex-item">flex item 3</li>
    <li class="flex-item">flex item 5</li>
    <li class="flex-item">flex item 6</li>
    <li class="flex-item">flex item 7</li>    
</ul>
<ul class="flex-container">
    <li class="flex-item">flex item 1 flex item 1</li>
    <li class="flex-item">flex item 2</li>
    <li class="flex-item">flex item 3</li>
    <li class="flex-item">flex item 5 flex item 5</li>
    <li class="flex-item">flex item 6</li>
    <li class="flex-item">flex item 7</li>    
</ul>
<ul class="flex-container">
    <li class="flex-item">flex item 1</li>
    <li class="flex-item">flex item 2 flex item 2 flex item 2</li>
    <li class="flex-item">flex item 3</li>
    <li class="flex-item">flex item 5</li>
    <li class="flex-item">flex item 6 flex item 6 flex item 6</li>
    <li class="flex-item">flex item 7 flex item 7 flex item 7</li>    
</ul>

CSS：

.outer-container { 
    width: 300px;
    height: auto;
    padding: 5px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    background-color: Yellow;
}

.flex-container {
    padding: 0;
    margin: 0;
    display: -webkit-flex;
    display: flex;
    flex: 1;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.flex-container:nth-child(1) {
    background-color: Orange;
}

.flex-container:nth-child(2) {
    background-color: Red;
}

.flex-container:nth-child(3) {
    background-color: Silver;
}

.flex-item {
    list-style: none;
    background-color: DeepSkyblue;
    margin: 5px;
}

小提琴： https://jsfiddle.net/szpali76/ufj35bzL/

Answer 1

如果您将flex-items与列对齐，则可以使用justify-content:属性对其进行排列，

看看我的意思尝试添加：

.flex-container { 辩解内容：空间; }

<强> here's a fiddle

Answer 2

我担心这是不可能的，因为你试图在不同的子容器中对齐元素。你只能在每个列表中垂直地传播所有可用的列表项（参见Callum的回答），如果我理解的话，这不是你想要的。

这只是一个假设的例子，还是表格可供选择？如果内容在表格形式中，则表格仍然完全有效。从我在示例中看到的情况来看，这可能是表格的有效案例，但如果您不知道实际的预期内容是什么，则很难判断。

柔性盒均匀分布

2 个答案: