我尝试使用具有相同高度的沟槽进行三列设置。我目前试图用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
更多推荐
让Flexbox像引导列一样流动
发布评论