等高列 - CSS

Question

我有一个外部 div-元素，其中包含许多内部 div-元素。我想实现 inner-divs 在每个 window-size 上具有相同的高度。

如果我在 outer-div 上使用 display: flex;，问题是所有 inner-div 都在一条线上。应该有五个 div 连续，当 window 变小时，它们应该向下流动。

这是一个 JSFiddle：https://jsfiddle.net/k7oLbqj1/5/

我只能用 CSS 解决这个问题。我希望有人能帮助我。

提前致谢！

Answer 1

在 .outer 上使用 flex-wrap: wrap; 和 display: flex; 并在 .inner

上指定宽度

.outer {
    display: flex;
    flex-wrap: wrap;
}

.inner {
    background: #fff;
    border: 1px solid #000;
    padding: 10px;
    margin-bottom: 20px;
    width:20%;
    text-align: left;
    box-sizing: border-box;
}

https://jsfiddle.net/k7oLbqj1/6/

等高列 - CSS

Equal height columns - CSS

css

response