将 flexbox 子项设置为不同的高度以使用可用空间 [英] Set flexbox children to have different heights to use up available space

查看：45
本文介绍了将 flexbox 子项设置为不同的高度以使用可用空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

使用两列 flexbox 布局，如何让不同大小的子元素填充所有可用空间，而不是所有子元素都具有该行最高子元素的高度?

我在 jsbin 上设置了一个演示来说明问题.我希望所有的孩子都和他们包装好的东西一样大.

#container {宽度:800px；显示:弹性；flex-wrap: 包裹;}.细胞 {宽度:300px；柔性;1 辆汽车；}<div id="容器"><div class="cell">具有任意长内容的单元格.

<div class="cell">

<div class="cell">

<div class="cell">

<div class="cell">

解决方案

这是 Flexbox 行的预期行为方式.Flexbox 并不意味着用纯 CSS 重新创建 Masonry:一行中的项目不能占用为前一行/后一行分配的空间(如果您使用列方向，列也是如此).您可以使用 align-items 来防止它们拉伸，但仅此而已:

http://cssdeck.com/labs/9s9rhrhl

#container {宽度:800px；显示:弹性；flex-wrap: 包裹;对齐项目:flex-start；}.细胞 {宽度:300px；弹性:1 自动；填充:10px；边框:1px纯红色；}

否则，您应该使用列方向或多列模块(请参阅此 SO 答案:https://stackoverflow.com/a/20862961/1652962)

Using a two-column flexbox layout, how can different-sized children be made to fill all available space, instead of all children having the height of the tallest child of the row?

I set up a demo on jsbin that illustrates the problem. I'd like for all the children to be the size of their wrapped contents.

#container {

 width: 800px;
  display: flex;
  flex-wrap: wrap;
}

.cell {
  width: 300px;
  flex; 1 auto;
}


<div id="container">

<div class="cell">
Cells with arbitrarily long content.</div>

<div class="cell">
</div>

<div class="cell">
</div>

<div class="cell">
</div>

<div class="cell">
</div>

</div>

</body>
</html>

解决方案

This is how Flexbox rows are expected to behave. Flexbox is not meant to recreate Masonry with pure CSS: items in one row cannot occupy space allocated for a preceding/following row (same goes for columns if you're using column orientation). You can use align-items to prevent them from stretching, but that's about it:

http://cssdeck.com/labs/9s9rhrhl

#container {

 width: 800px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.cell {
  width: 300px;
  flex: 1 auto;
  padding: 10px;
  border: 1px solid red;
}

Otherwise, you should be using the column orientation or the multi-column module (see this SO answer: https://stackoverflow.com/a/20862961/1652962)

这篇关于将 flexbox 子项设置为不同的高度以使用可用空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆