Twitter bootstrap 让flexbox像引导列一样流动

我试着用高度相等的水槽做一个三柱的设置。我目前正试图用flexbox实现这一点，但我遇到的问题是，如果一行最后有两列，

justify content:space-between在中间，而不是从左到右流动，就像引导柱一样。我认为这可以通过
align-content:flex-start但我要么用错了，要么就是我试图用的方式不起作用。
有没有办法让flexbox使用排水沟之间的空间，但保持从左到右的流动？这里有一个链接，显示我遇到的问题以及我希望它看起来如何


另外，是否有一种方法可以使用flexbox，在引导的填充和列宽%设置中使用子元素，然后在列中使用100%高度的子元素？
一种方法是删除
对内容进行对齐
并使用
边距管理水槽
，然后使用
：n个子元素（n）
选择器，可选择性地删除边距，使元素匹配
 解决此问题的一种方法是将“幻影”div作为最后一个具有
可见性：hidden
的子级

我已经从代码中复制了第一个flex项，并将其粘贴为容器中的最后一个项。我在其中添加了一个
隐藏的
类

<div class="column hidden">
  <div class="column-content">
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>
</div>


有关其他选项，请参见以下答案：


align content:flex start
无法按预期工作的原因是
align-*
属性沿横轴工作。在这种情况下，由于flex容器是
flex direction:row
，因此横轴是垂直的。因此，
align content
，
align items
和
align self
将上下移动弹性项目，而不是左右移动

有关主轴/横轴的说明以及有关
align-*
属性的更多详细信息，请参见此处：
这是一个可以满足您需要的版本

它显示了2列和3列的布局，只有2个额外的CSS规则


.container2，
.集装箱3{
最大宽度：840像素；
保证金：0自动；
右边框：1px纯红；
左边框：1px纯红；
}
.flex{
显示器：flex；
柔性包装：包装；
边缘底部：40px；
}
.容器3.柱{
框大小：边框框；
边缘底部：12px；
宽度：钙（33.33%-8px）；
背景：#000；
}
.container3.列：第n个子项（3n+2），
.container3.列：第n个子项（3n+3）{
左边距：12px；
}
.栏目内容{
填充：20px；
颜色：#fff；
}
.容器2.柱{
框大小：边框框；
边缘底部：12px；
宽度：钙（50%-6px）；
背景：#000；
}
.container2.列：第n个子项（2n+2）{
左边距：12px；
}

内容

内容

内容

内容

内容

内容

内容


内容

内容

内容

内容

内容

内容

内容

我就是这样决定的。我使用的是标准的引导设置，列上有填充，父项上有负边距，但是设置
display:flex到父级和带有
flex wrap:wrap的列”。通过这种方式，我可以使用boostrap列的百分比宽度，并从flex获得相等的高度。
我的回答可能会对您有所帮助：所谓“幻影元素”，您的意思是有点像表中的空单元格？可惜这种方法没有一种像引导一样让列在整个过程中100%相等的好方法。我曾经在第三个窗口的末端有一个小的间隙，或者在较小的窗口尺寸下它会形成一条线。你可以看到这里的差距。这里有一个解决方法-基本上问题是，如果没有flex，您将永远不会得到3列，以精确地占据33.3333%的增量并且不进行换行。（请特别注意我使用的
.flex:after
来填补“空白”在最下面一行中应该有第三个单元格。如果一行中只有一个单元格，则可能需要添加其中两个单元格）。看起来这可能会起作用。我明天回去工作时会试试的。谢谢，我知道我要怎么做了。如果你好奇的话，看看我的最新答案。首先，请只发布一个答案。第二，是的，这也很有效。。。如果我看得对的话，我的和你的区别是你用填充/边距来达到排水沟，我用第n个子/边距。。所以这就像茶，一些人想要柠檬，一些牛奶：）如果你限制宽度（调整你的代码笔演示），你的排水沟塌陷，我的不会。。。这是我的答案，如果你想检查的话，我只发布了第二个答案，因为它与我认为它不起作用的时候完全不同，我不得不求助于javascript。我想我应该修改我的答案。正是你的例子让我明白了我最终是怎么做的。我之所以使用我的方法而不是你的方法，是因为我希望它足够动态，可以放置我想要的任何宽度的列，并且能够在响应上更改该列的宽度，而无需执行新的第n个子项。所以，我的最终代码基本上是引导的，但与flexbox的高度相同。。。另外，你没有要求一个混合列解决方案，你要求的是一个3列，所有答案都试图解决。在其他人的基础上添加你自己的，告诉它可以做混合专栏，IMHO，超出了你最初的问题。最公平的做法是选择最能解决您最初问题的答案，并提出新的要求（因为这已经根据您最初的要求得到了答案）
.hidden { visibility: hidden; }