让Flexbox像引导列一样流动

本文介绍了让Flexbox像引导列一样流动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我尝试使用具有相同高度的沟槽进行三列设置。我目前试图用flexbox这样做，但我遇到的问题是，如果一行最后有两列， justify-content：space-between; 在中间形成一个间隙，而不是像引导列那样从左到右流动。我认为这将使用 align-content：flex-start; ，但我使用它错误或它不工作的方式，我想使用它。 有一种方法让flexbox使用之间的空间为水槽，但保持左到右流？这是一个链接，显示我遇到的问题和我想要的样子。

I'm trying to make a three column setup with gutters that has equal heights. I'm currently trying to do this with flexbox but the issue I'm having is that if a row ends up having two columns, the justify-content: space-between; makes a gap in the middle instead of flowing left to right like bootstrap columns would do. I thought this would be done with align-content: flex-start; but I'm either using it wrong or it doesn't work the way I'm trying to use it. Is there a way to have flexbox use the space between for the gutters but keep the left to right flow? Here is a link to show the issue I'm having and how I want it to look.

codepen.io/anon/pen/jWvqdL

此外，有没有办法使用flexbox的填充和列宽度％设置的引导然后在列中的一个子元素是100％的高度？

Also, is there a way to use flexbox with the padding and column width % setup of bootstrap then have a child element inside the column that is 100% height?

推荐答案

这是我决定这样做。我使用标准的引导设置，填充在列和父页面上的负边距，但设置 display：flex; 到父级和列 flex-wrap：wrap; 。这样，我可以使用boostrap列百分比宽度，并具有与flex相等的高度。 codepen.io/anon/pen/wMExMJ

This is how I decided to do it. I'm using the standard bootstrap set up, with the padding on columns and negative margin on the parent, but setting display: flex; to the parent and the column with flex-wrap: wrap; on the parent. This way, I can use the boostrap column percent width and have equal height from flex. codepen.io/anon/pen/wMExMJ