为什么我的 flexbox 不能正常工作？答案

【问题标题】：Why is my flexbox not working correctly?为什么我的 flexbox 不能正常工作？
【发布时间】：2016-07-28 13:14:55
【问题描述】：

我连续三个 div。第一个应该是固定的，第二个应该扩展直到达到“最大宽度”，第三个 div 应该占用剩余空间。它可以正常工作，直到第三个 div 的文本达到整个宽度。而不是仅仅包装它的文本开始使第二个 div 更小。

<div id="container">
    <div id="one">
    sdfsdf
    </div>
    <div id="two">
    fghfgh fghfghd sdf sdf sdf ssdf sdf gh
    </div>
    <div id="three">
    sdfsdfsdfsdfsfd sdf sdf sdf sdf sdfwef sdfwefs df 
    </div>
</div>

#container{
  background-color: red;
  display: flex;
  height: 100px;
  width: 400px;
}

#one{
  background-color: blue;
  flex-grow: 1;
  width:60px;
}
#two{
   background-color: red;
   max-width: 100px
}
#three{
   background-color: green;
   flex-grow: 1;
}

你可以找到一个 jsfiddle here。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

你可以试试下面的代码：

#container {
  background-color: red;
  display: flex;
  height: 100px;
  width: 400px;
}

#one {
  background-color: blue;
  width:60px;
}

#two {
  background-color: red;
  max-width: 100px
}

#three {
  background-color: green;
  flex: 1;
}

如果你想让一个 div 占用 flexbox 的剩余空间，你可以应该 div flex: 1 并给其他 div 指定宽度。否则 div 不会占用剩余空间。

【讨论】：

【解决方案2】：

您可以尝试在第三个div中添加flex-grow: 1：

#container {
  display: flex;
  height: 100px;
  width: 400px;
}

#one,
#two,
#three {
  flex-grow: 1;
}

#one {
  background-color: blue;
}

#container,
#two {
  background-color: red;
}

#three {
  background-color: green;
}

【讨论】：

【解决方案3】：

#one div 应该有 flex-shrink: 0 并且没有 flex-grow。
#two 应该有 flex-shrink: 0 和 flex-grow: 1
#three 应该没有收缩/增长属性

【讨论】：