开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第二十天,点击查看活动详情

深入解析CSS(第七天)

flex

这篇文章我们继续讲解flex布局的各个参数和属性

使用flex属性设置列宽

有时我们会有一个需求就是某一行中,左边要是右边的二倍或者其他倍数,我们可能会使用百分比来实现,flex属性也能满足你的需求

使用flex属性给两列分别赋以2/3和1/3的宽度。flex属性是三个不同大小属性的简写：flex-grow、flex-shrink和flex-basis 。

flex-basis

flex-basis定义了元素大小的基准值，即一个初始的“主尺寸”。flex-basis属性可以设置为任意的width值，包括px、em、百分比。它的初始值是auto，此时浏览器会检查元素是否设置了width属性值。如果有，则使用width的值作为flex-basis的值；如果没有，则用元素内容自身的大小。如果flex-basis的值不是auto, width属性会被忽略。

每个弹性子元素的初始主尺寸确定后，它们可能需要在主轴方向扩大或者缩小来适应（或者填充）弹性容器的大小。这时候就需要flex-grow和flex-shrink来决定缩放的规则。

flex-grow

每个弹性子元素的flex-basis值计算出来后，它们（加上子元素之间的外边距）加起来会占据一定的宽度。加起来的宽度不一定正好填满弹性容器的宽度，可能会有留白,多出来的留白（或剩余宽度）会按照flex-grow（增长因子）的值分配给每个弹性子元素，flex-grow的值为非负整数。如果一个弹性子元素的flex-grow值为0，那么它的宽度不会超过flex-basis的值；如果某个弹性子元素的增长因子非0，那么这些元素会增长到所有的剩余空间被分配完，也就意味着弹性子元素会填满容器的宽度.flex-grow的值越大，元素的“权重”越高，也就会占据更大的剩余宽度。一个flex-grow:2的子元素增长的宽度为flex-grow: 1的子元素的两倍

flex-shrink

flex-shrink属性与flex-grow遵循相似的原则。计算出弹性子元素的初始主尺寸后，它们的累加值可能会超出弹性容器的可用宽度。如果不用flex-shrink，就会导致溢出

每个子元素的flex-shrink值代表了它是否应该收缩以防止溢出。如果某个子元素为flex-shrink: 0，则不会收缩；如果值大于0，则会收缩至不再溢出。按照flex-shrink值的比例，值越大的元素收缩得越多。用flex-shrink也能实现上述页面中两列的宽度。首先将两列的flex-basis指定为理想的比例（66.67%和33.33%）。它们的宽度之和加上1.5em的间隔就会比容器宽度多出1.5em。然后将两列的flex-shrink设置为1，这样就会从每列的宽度减掉0.75em，于是容器就能容纳两列了。