Flexbox：为什么flex-grow不能用于固定宽度的兄弟？ [英] Flexbox: Why flex-grow doesn't work with fixed width sibling?

问题描述

需要使用 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中）

LIVE DEMO

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?

PLAYGROUND HERE

解决方案

You need to use flex: 1; instead of flex-grow: 1;

.first {
    flex: 1;
    background-color: #aaa;
}

Demo

---

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屋！