- 首页
- 前端开发
- 使用 flexbox 防止下一行占据上一行中最高项目的高度?
使用 flexbox 防止下一行占据上一行中最高项目的高度?
[英] Prevent next row taking up height of tallest item in previous row with flexbox?
本文介绍了使用 flexbox 防止下一行占据上一行中最高项目的高度?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用由 2 列组成的 flexbox 进行了布局.当一切都相同高度时，它工作正常:
<div class="a">一个
<div class="b">B</div><div class="c">C</div>
* {box-sizing: 边框框；}.cont {宽度:400px；背景:黄金；显示:弹性；弹性方向:行；flex-wrap: 包裹;对齐内容:间隔；}.一个，.b,.C {宽度:45%；填充:10px；}.一个 {背景:红色；}.b {背景:蓝色；白颜色;}.C {背景:橙色；}
然而实际上div.b可能比div.a高，但我不希望div.a的高度或div.c的位置改变:
<div class="a">一个
<div class="b">乙<br>更多 B
<div class="c">C</div>
我可以用 flexbox 实现我想要的布局吗?我确信网格可以做到这一点，但我不愿意使用它，因为它仍然没有在 IE 中得到正确支持.
解决方案
Flexbox 本身无法以灵活的方式做到这一点.
正如您自己提到的，CSS Grid 可以做到这一点，但由于您不希望那样，此建议是基于假设您在较窄的屏幕上希望 b 位于底部.
简单地先用float，然后在某个断点处，在float和display:flex之间进行切换，就很容易了充分利用两者.
此外，使用 Flexbox 的 order 属性，您可以轻松地以任何所需的顺序定位元素，并通过此避免脚本并获得合理水平的浏览器支持.
更新代码笔
堆栈片段
* {box-sizing: 边框框；}.cont {背景:黄金；溢出:隐藏；}.一个，.b,.C {宽度:45%；填充:10px；向左飘浮;}.一个 {背景:红色；}.b {背景:蓝色；白颜色;浮动:对；}.C {背景:橙色；}@media(最大宽度:500px){.一个，.b,.C {宽度:自动；浮动:无；}.b {订单:1；}.cont {显示:弹性；弹性方向:列；}}
<div class="a">一个
<div class="b">乙<br>更多 B
<div class="c">C</div>
I made a layout with flexbox consisting of 2 columns. When everything is the same height it works fine:
https://codepen.io/anon/pen/rJZeJm
<div class="cont">
<div class="a">
A
</div>
<div class="b">B</div>
<div class="c">C</div>
</div>
* {
box-sizing: border-box;
}
.cont {
width: 400px;
background: gold;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.a,
.b,
.c {
width: 45%;
padding: 10px;
}
.a {
background: red;
}
.b {
background: blue;
color: white;
}
.c {
background: orange;
}
However in reality div.b may be taller than div.a, but I don't want the height of div.a or the position of div.c to change:
https://codepen.io/anon/pen/KQxzoz
<div class="cont">
<div class="a">
A
</div>
<div class="b">
B
<br>
More B
</div>
<div class="c">C</div>
</div>
Can I achieve my desired layout with flexbox? Im sure grid could do this but I'm reluctant to use it as its still not properly supported in IE.
解决方案
Flexbox can't do that by itself in a flexible way.
As you mentioned yourself, CSS Grid can do this, though since you didn't want that, this suggestion is based on the assumption that you at narrower screens want the b to be at the bottom.
By simply initially use float, and then at a certain break point, swap between float and display: flex, it is very easy to take advantage of both.
Additionally, using Flexbox's order property, one can easily position the elements in any desired order, and with this avoid script and get a reasonable level of browser support.
Updated codepen
Stack snippet
* {
box-sizing: border-box;
}
.cont {
background: gold;
overflow: hidden;
}
.a,
.b,
.c {
width: 45%;
padding: 10px;
float: left;
}
.a {
background: red;
}
.b {
background: blue;
color: white;
float: right;
}
.c {
background: orange;
}
@media (max-width: 500px) {
.a,
.b,
.c {
width: auto;
float: none;
}
.b {
order: 1;
}
.cont {
display: flex;
flex-direction: column;
}
}
<div class="cont">
<div class="a">
A
</div>
<div class="b">
B
<br>
More B
</div>
<div class="c">C</div>
</div>
这篇关于使用 flexbox 防止下一行占据上一行中最高项目的高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
