flex布局是一个比较庞大的体系，设置flex项目（flex的子元素）宽度width不生效的原因也是各种各样的，我们讲一个比较常见的例子。
我们给父元素.outer设置为flex布局，宽度是300px，背景是绿色。它的两个子元素分别把背景色设为浅灰#ddd和深灰#555，第一个子元素.inner1设置宽度200px，第二个子元素inner2不设置宽度而是让文字撑开自适应。
我们在浏览器打开该页面，发现.inner1的宽度未生效，变得特别窄，在我的浏览器显示宽度是95.5px（显示宽度与字体等因素有关）。那么该如何让其显示为我们设置的200px呢？
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.outer {
display: flex;
width: 300px;
background-color: green;
}
.inner1 {
width: 200px;
height: 200px;
background-color: #ddd;
}
.inner2 {
height: 200px;
background-color: #555;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1">这是flex子项inner1</div>
<div class="inner2">这是flex子项inner2 这是flex子项inner2 这是flex子项inner2</div>
</div>
</body>
</html>
.inner1没有显示成200px，原因简单说是.inner2占据了其空间，使其width属性失效了。我们只需要给.inner2设置flex:1就可以使.inner1的width显示正常。如果要讲更深层次的原因，可能会把大家弄晕，反而不如不讲，只需要知道简单原因就行了。
下面的分别是给.inner2增加了flex:1属性的html代码及其页面展示效果。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.outer {
display: flex;
width: 300px;
background-color: green;
}
.inner1 {
width: 200px;
height: 200px;
background-color: #ddd;
}
.inner2 {
height: 200px;
background-color: #555;
flex: 1;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1">这是flex子项inner1</div>
<div class="inner2">这是flex子项inner2 这是flex子项inner2 这是flex子项inner2</div>
</div>
</body>
</html>
版权采用《署名-非商业性使用-禁止演绎 4.0 国际》许可协议 转载需注明原文作者、链接与版权协议
给左边的设置 flex-shrink: 0 是不是更好