Flexbox:为什么flex-grow不能用于固定宽度的兄弟? [英] Flexbox: Why flex-grow doesn't work with fixed width sibling?
本文介绍了Flexbox:为什么flex-grow不能用于固定宽度的兄弟?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
需要使用 flex:1;
而不是 flex-grow:1;
.first {
flex:1;
background-color:#aaa;
}
演示
$ b
$ b $另外,我想指出的是,对于IE而言,flexbox的支持并不好,所以如果任何人对类似的布局感兴趣,可以使用更多的兼容选项,比
< div class =wrapper>
< div class =second>< / div>
< div class =first>< / div>
< / div>
.wrapper {
border:1px纯黑色;
width:300px;
height:100px;
margin-top:30px;
}
.wrapper .first {
background:red;
身高:100%;
margin-right:80px;
}
.wrapper .second {
height:100%;
width:80px;
float:right;
背景:蓝色;
Demo (注意,我将 div
在DOM中)
Consider the following HTML and CSS:
<div class="wrapper">
<div class="first">The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement .</div>
<div class="second"></div>
</div>
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
</div>
.wrapper {
display: flex;
border: 1px solid black;
width: 300px;
height: 100px;
margin-top: 30px;
}
.first {
flex-grow: 1;
background-color: #aaa;
}
.second {
width: 80px;
background-color: #ddd;
}
and the following result:
Why the first wrapper doesn't respect .second
's width: 80px
?
How could I fix that using flexbox?
解决方案
You need to use flex: 1;
instead of flex-grow: 1;
.first {
flex: 1;
background-color: #aaa;
}
Also, I would like to point out that flexbox support isn't good as far as IE is concerned, so if anyones interested in a similar layout with more compatible option, than
<div class="wrapper">
<div class="second"></div>
<div class="first"></div>
</div>
.wrapper {
border: 1px solid black;
width: 300px;
height: 100px;
margin-top: 30px;
}
.wrapper .first {
background: red;
height: 100%;
margin-right: 80px;
}
.wrapper .second {
height: 100%;
width: 80px;
float: right;
background: blue;
}
Demo (Note that I swapped the order of the div
in the DOM)
这篇关于Flexbox:为什么flex-grow不能用于固定宽度的兄弟?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文