始终在 3 列中显示 div，无论它们在 flex 中的高度如何 parent

Question

我需要 divs 始终显示在 3 列中，而不管它们在 flex parent 中的高度和 divs 的数量（它可以是 10 个或更多 - 但总是在 3 列中 - 在彼此下方）我该怎么做？ Code Pan 示例表示赞赏。

编辑：

<div class='main'>
<div class='div'>1</div>
<div class='div'>2</div>
<div class='div'>3</div>
<div class='div'>4</div>
</div>

.main {display:flex;flex-direction:row;background:silver;}
.div {width:33%; height:10px;background:gold;margin:10px;}

这是我的示例http://codepen.io/broudi/pen/MyVNyz - [=37= 中有 4 个相等的 div ] 弹性 div。无论 parent div 中有多少 div，我都需要始终将它们放在 3 列中（如果前 3 个位置被占用，那么一个在另一个下面）。

新编辑：另一个问题：这是我的代码：http://codepen.io/broudi/pen/MyVNyz

问题是，如果一个或多个孩子的身高与其他孩子的身高不同，那么下面的 div 就不会像预期的那样。它需要一些 space。请查看我的 CODEPAN 示例。我怎样才能使内部 divs 无论高度如何都以相等的 5px 边距依次出现？

Answer 1

你必须给父 flex-wrap:wrap; 和 div 30% 而不是 33% 因为 margin:10px; 现在你总是有一行 3 div的

甚至输入 justify-content:space-around; 或 between 因为它看起来更好

.main {display:flex;flex-direction:row;background:silver; flex-wrap:wrap; justify-content:space-around;}
.div {width:30%; height:10px;background:gold;margin:10px;}

<div class='main'>
   <div class='div'>1</div>
   <div class='div'>2</div>
   <div class='div'>3</div>
   <div class='div'>4</div>
   <div class='div'>5</div>
   <div class='div'>6</div>
   <div class='div'>7</div>
   <div class='div'>8</div>
   <div class='div'>9</div>
   <div class='div'>10</div>
   <div class='div'>11</div>
   <div class='div'>12</div>
</div>

始终在 3 列中显示 div，无论它们在 flex 中的高度如何 parent

display divs always in 3 columns regardless of their heights in flex parent

css

position

flexbox