【备战春招】第4天 flex基础与应用(三)

课程名称：六个案例学会响应式布局

课程章节： flex基础与应用

课程讲师：大谷

课程内容：

其他属性相关属性值：

(1) flex-basis： 设置弹性盒伸缩基准值。

(2) flex-grow：设置弹性盒子的扩展比率。

(3) flex-shrink：设置弹性盒子的缩小比率。

(4) flex：flex-grow、flex-shrink、flex-basis的缩写。

当我们想要实现子元素以基准值为准，不以宽度为准，那么我们可以给子元素设置flex-basis属性，实现的效果如下，此时子元素的宽度就会失效。除了使用像素，我们还可以使用百分比，rem等单位设置基准值。我们可以设置某一个元素的基准值还可以设置全部子元素的基准值。

当我们想要实现子元素的宽度为子元素原有宽度+父元素剩余宽度的一半，我们就可以使用flex-grow属性值，使用方法如下，其中flex-grow的值是整数，用来表示占用父元素剩余宽度的几份，比如第一个子元素宽度是100，第二个子元素宽度也是100，父元素宽度为400，那么剩余宽度就是400-100-100=200，意思就是剩余宽度就是父元素减去所有子元素的宽度，然后又因为设置的数值为1，有两个子元素，那么就是2份，那么两个子元素就会再原有的基础上平均分了200/2=100，所以这就是为什么下面的代码每个元素的宽度为200。如果想要哪个子元素分的份数更多，就可以将某个子元素设置的数字大一些。

上一个讲的是将剩余部分平分，而flex-shrink是将超出的部分进行平分，当父元素是400，两个子元素都是300，那么总共超出了200，我们将各自子元素的份数相加，然后平均分给两个子元素。所以每个子元素分到的应该是300，具体设置的代码如下：

我们可以将flex-grow: 1, flex-shrink: 2, flex-basis: 300px;简写为flex: 1 2 300px;，我们需要的注意的是这个顺序是固定的，不要写错了，第一个值是扩大比率，第二个值是缩小的比率，第三个是基准值。

课程收获：

这一章主要学习了flex中的flex-grow和flex-shrink以及flex-basis属性值的使用。我们有几点需要注意，一是flex-basis基准值设置后，宽度就会失效。二是使用flex-grow和flex-shrink的时候，flex-grow是平均按设置的比例划分父元素剩余的宽度，flex-shrink是划分子元素之和超出父元素的比例。第三点就是我们在简写这三个属性值，顺序不能写错了，顺序分别是flex-grow、flex-shrink、flex-basis，三个属性之间用空格隔开。熟练使用这几个属性有利于我们对元素进行合理的排版。