网页css布局，flex弹性盒子，子元素如何控制宽高尺寸？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

继续学习flex的子元素布局，苏南大叔在本文中主要讲述子元素的尺寸相关属性。主要是如下几个属性：flex-basis、flex-grow、flex-shrink、flex。这些属性都是定义在子元素上面的。请千万别把这些属性放错位置。

本文测试环境：mac/chrome@75.0.3770.100。本文的前提是：父元素display:flex。本文章描述的是子元素的flex属性，常见的值是：flex:1或者flex:auto。flex属性分为：flex-grow、flow-shrink和flex-basis。

偷偷的说一句，本文中的例子都没有被折行。所以，可以思考一下设置子元素宽度和盒子元素的相互关系。比如：子元素宽度33.33%，那么三个子元素就折行。

基本代码

测试代码如下：

<div class="box">
    <div style="background-color:coral;"></div>
    <div style="background-color:lightblue;"></div>
    <div style="background-color:khaki;"></div>
    <div style="background-color:pink;"></div>
    <div style="background-color:lightgrey;"></div>
</div>

.box {
    width: 350px;
    height: 320px;
    border: 1px solid #c3c3c3;
    display: flex;
    flex-direction:column;
}
.box div {
    flex-basis: 40px;
}
.box div:nth-of-type(2) {
    flex-basis: 100px;
}

flex-basis，定义子元素在主轴方向上的宽度或者高度。

• 主轴（父元素的flex-direction）为row【默认】的话，那么子元素横向排列，flex-basis为宽度，高度随父元素。
• 主轴（父元素的flex-direction）为column的话，那么子元素纵向排列，flex-basis为高度，宽度随父元素。
• 设置了flex-basis的话，推荐设置flex-shrink和flex-grow为0。
• 设置了flex-basis的话，就不设置width或者height，如果设置的话，冲突以flex-basis为准。

flex-grow扩张

flex-grow属性，定义子元素在主轴方向上所占据的比例，解决占“几”份的问题。因为是grow，其实前提条件就是当父元素在主轴方向上的尺寸（宽度或高度），比对应子元素的尺寸（宽度或高度）的合集还要大的时候，大家如何分摊占据剩余的尺寸。说白了，就是如何占据父元素的剩余空间的一个协议。

• 默认为0，就是不扩张的意思。
• 对于主轴为row来说，就是宽度比例。
• 对于主轴为column来说，就是高度比例。

测试代码：

.box {
  width: 350px;
  height: 320px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-direction:column;
}

.item:nth-of-type(1) {flex-grow: 1;}
.item:nth-of-type(2) {flex-grow: 3;}
.item:nth-of-type(3) {flex-grow: 1;}
.item:nth-of-type(4) {flex-grow: 1;}
.item:nth-of-type(5) {flex-grow: 1;}

flex-shrink收缩

flex-shrink的默认值为1，如果没有显示定义该属性，将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。
这个和flex-grow的概念基本类似，在父元素的在主轴方向上的尺寸（宽度或者高度），比所有子元素的尺寸（宽度或者高度）之和还要小的时候。这些子元素就按照约定好的flex-shrink，进行收缩。

说白了，就是子元素如何分担父元素负债部分的一个协议。

下面是相关例子：

<div class="box">
  <div class="item" style="background-color:red;">A</div>
  <div class="item" style="background-color:lightblue;">B</div>
  <div class="item" style="background-color:yellow;">C</div>
  <div class="item2" style="background-color:brown;">D</div>
  <div class="item2" style="background-color:lightgreen;">E</div>
</div>

.box {
  display: flex;
  width: 360px;
}
.box div {
  flex-basis: 120px;
}
.item { 
  flex-shrink: 1;
}
.item2 { 
  flex-shrink: 2; 
}

这个例子中，flex的flex-direction方向是默认的row，就是说横向排列。那么，主要的考虑值就是宽度。而父容器的宽度为360px，子元素宽度为120px，一共为5个元素。所以，缺少的宽度是120*5-360=240。

可以理解为父元素负债为240px，将有五个子元素来承担，前三个子元素的flex-shrink为1，后两个子元素的flex-shrink为2。所以240px将分为（31+22）=7份，每份大约为34像素。那么，前三个元素的宽度为120-34=86像素。后两个的宽度为120-34*2=52，总体的宽度为86*3+52*2=362。因为有小数点存在，所以有2个像素的误差。

flex-shrink取值0和1的区别

当父容器在子元素的排列方向上的尺寸（宽度或高度）够用的时候，子元素的flex-shrink取值无所谓。但是，一旦发生了不够用的情况，那么，每个子元素都要按照约定好的比例承担差值。

特殊的情况就是flex-shrink取值为0的时候，如果每个子元素都不承担父元素的债务的话，那么父元素就会被撑开，实际尺寸（宽度或高度）就会和父元素的设定不符（父元素的相关设定失效）。

flex

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。默认值：0 1 auto。

上述这些flex相关属性，都是定义在子元素上面的！！！

苏南大叔解释一下的话，就是：有好处的时候，大家都很谦虚，都不要。但是有难的时候，大家都默认分担一份。至于自己占多大地方，就看命吧。

flex:1;

等同于：

flex-grow:1;
flex-shrink:1;
flex-basis:0%

不等同于：

flex:0 1 auto;

总结

关于问题"弹性盒元素需要设置宽高吗?"，答案就是：如果设置了flex或者flex-basis，那么设置width或者height都是没有意义的。如果没有设置flex或者flex-basis，那么就愉快的设置width和height吧～

各位看客，如果您觉得苏南大叔写的还不错的话，麻烦评论转发打赏订阅。谢谢。全部的flex相关文章，请点击下面的苏南大叔的博客链接查看：

• https://newsn.net/tag/flex/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。