CSS3Flex布局⼦元素的属性
弹性布局盒模型的核⼼，在于弹性容器中⼦元素的尺⼨是弹性的，容器会根据布局的需要，⾃动调整⼦元素的尺⼨和顺序，并以最佳⽅式填充所有可⽤空间。
当容器中有空⽩空间时，⼦元素可以扩展，以占据额外的空⽩空间；当容器中的空间不⾜时，⼦元素可以缩⼩尺⼨，以防⽌超出容器范围。
在弹性布局盒模型中，浏览器会根据⼦元素的相关属性，来⾃动调整⼦元素的尺⼨和顺序。这些属性见表 9‑8：
表 9-8 CSS3弹性布局盒模型⼦元素属性
属性说明
order定义⼦元素的排列顺序
flex-grow定义⼦元素的拉伸因⼦，当容器空间过剩时，⼦元素按⽐例进⾏拉伸
flex-shrink定义⼦元素的收缩因⼦，当容器空间不⾜时，⼦元素按⽐例进⾏收缩
flex-basis定义为⼦元素分配的默认空间⼤⼩
flex复合属性，定义⼦元素的拉伸因⼦、收缩因⼦、默认空间⼤⼩
align-self定义⼦元素⾃⾝在侧轴⽅向上的对齐⽅式
flex布局对齐方式order属性
默认情况下，弹性容器中⼦元素的排列顺序，取决于它们在HTML代码中的排列顺序，先出现的排在前⾯。
在弹性布局盒模型中，每个⼦元素有⾃⼰独⽴的，⽤来控制⼦元素的排列顺序，数值⼩的排在前⾯。语法格式为：
1. order:<integer>
order属性的默认值为 0。可以为负值。指定 order 属性后，浏览器将根据 order属性的值，对⼦元素进⾏分组，order 值相同的元素属于⼀组，值⼩的组排在前⾯，组内则根据元素在HTML代码中出现的先后顺序，先出现的排在前⾯。
现在，为三个⼦元素定义 order属性，取值分别是 2、1、-1，就相当于把所有⼦元素分为 3 组，每组 1 个元素。CSS代码如下：
1. .box1 {
2. order:2;
3. background:#7f3ffd;
4. }
5. .box2 {
6. order:1;
7. background:#ef39d5;
8. }
9. .box3 {
10. order:-1;
11. background:#1bb9f1;
12. }
上述代码运⾏结果如图 9‑18 所⽰：
图9-18 order属性效果
可以看出，box1、box2、box3 的出现顺序与它们在HTML中的定义顺序⽆关，⽽是按照 order属性值的⼤⼩，数值⼩的排在前⾯。
flex-grow属性
⽤来定义⼦元素的拉伸因⼦，当容器有多余的空间时，浏览器把所有⼦元素的 flex-grow属性值相加，再根据各⾃在总值中所占的份额，分配容器的多余空间。语法为：
1. flex-grow:<number>
flex-grow属性的默认值为 0。⽀持整数或⼩数，不允许负值。如果某个⼦元素没有定义 flex-grow属性，或将 flex-grow属性显式设置为 0，或定义了固定尺⼨，则不再为它分配⽗元素的多余空间。
1. .father {
2. width:600px;
3. display: flex;
4. }
5. .father > div {
6. width:100px;
7. }
8. .box1 {
9. flex-grow:2;
10. background:#7f3ffd;
11. }
12. .box2 {
13. flex-grow:1;
14. background:#ef39d5;
15. }
16. .box3 {
17. background:#1bb9f1;
18. }
上述代码中，⽗元素的宽度是 600px，每个⼦元素的宽度为 100px，于是，⽗元素的剩余宽度就变成 600 – 3×100 = 300px。
box1 和box2 定义了 flex-grow属性，box3 未定义。故 box1 和 box2 把剩余空间分成 2 + 1 = 3 份，box1 占 2/3，box2 占1/3。于是，box1、box2 按 3:1 来分配这 300px，box3 不分配。box1 分得 300×(2/3) = 200px，box2 分得 300×(1/3) =
100px。
最终的结果是，box1 和 box2 在预分配空间的基础上，⼜分得了剩余空间，⽽ box3 仅有原本的 100px ⽽已。运⾏结果如图9‑19 所⽰：
图9-19 flex-grow属性效果
可以看出，box1 的实际宽度为100 + 200 = 300px，box2的实际宽度为100 + 100 = 200px，box3 的实际宽度仍然是
100px。
flex-shrink属性
定义⼦元素的收缩因⼦，当容器空间不⾜时，浏览器把所有⼦元素的 flex-shrink属性值相加，再根据各⾃在总值中所占的份额进⾏收缩。语法为：
1. flex-shrink:<number>
flex-shrink属性的默认值为 1。不允许负值，0 表⽰不收缩。如，⽗元素 father 下有两个⼦元素 box1、box2。HTML代码如下：
1. <div class="father">
2. <div class="box1">1</div>
3. <div class="box2">2</div>
4. </div>
CSS代码如下：
1. .father {
2. width:600px;
3. display: flex;
4. }
5. .box1 {
6. width:400px;
7. flex-shrink:3;
8. background:#7f3ffd;
9. }
10. .box2 {
11. width:400px;
12. background:#ef39d5;
13. }
上述代码中，⽗元素的宽度是 600px，每个⼦元素的宽度是 400px，于是，⽗元素的宽度不⾜。为了能够容纳所有⼦元素，⼦元素需要收缩，待收缩的宽度为 2×400 – 600 = 200px。
box1 定义了 flex-shrink属性，box2 未定义，box2 的 flex-shrink属性使⽤默认值 1。box1, box2 把待收缩空间分成 3 + 1 = 4份，box1 占 3/4，box2 占 1/4。于是，box1 和 box2按 3:1 来分配这 200px，box1要收缩 200×(3/4) = 150px，box2 要收缩200×(1/4) = 50px。
最终的结果是，box1 的实际宽度为 400 – 150 = 250px, box2 的实际宽度为400 – 50 = 350px。运⾏结果如图 9‑20 所⽰：
图9-20 flex-shrink属性效果flex-basis属性
⽤来定义为⼦元素预留的主轴尺⼨。语法为：flex-basis: <length> | auto，默认值为 auto。
取值值为 auto 时，实际使⽤的值是主轴尺⼨属性的值，即 width 或 height 属性的值。如果主轴尺⼨属性的值也是 auto，则要根据其内容和 flex-grow属性来分配空间。
取值为长度值时，⾸先为该元素预留空间，预留后剩余的空间，再分配给所有⼦元素。这样⼀来，该元素除了预留空间外，还会分得容器的剩余空间。在⽗元素的空间有剩余时，该元素分配的空间 = flex-basis + flex-grow；在⽗元素空间不⾜时，该元素分配的空间 = flex-basis - flex-shrink。
如，⽗元素 father 下有两个⼦元素 box1、box2。HTML代码如下：
1. <div class="father">
2. <div class="box1">1</div>
3. <div class="box2">2</div>
4. </div>
CSS代码如下：
1. .father {
2. width:400px;
3. display: flex;
4. }
5. .box1 {
6. flex-grow:1;
7. flex-basis:200px;
8. background:#7f3ffd;
9. }
10. .box2 {
11. flex-grow:1;
12. background:#ef39d5;
13. }
上述代码中，⽗元素的宽度是 400px。box1 定义了 flex-basis属性，预留了 200px 的空间。⽽ box2 未定义 flex-basis属性，并未预留空间。这样⼀来，⽗元素剩余的空间就变成了 400 – 200 = 200px。
由于 box1, box2 的 flex-grow属性的值都是 1，故由 box1, box2 均分⽗元素的剩余空间，各分得 100px。最终结果是，box1 的实际宽度为 200 + 100 = 300px, box2 的实际宽度为 100px。运⾏结果如图 9‑21 所⽰：
图9-21 flex-basis属性效果
flex属性
flex属性是 flex-grow、flex-shrink、flex-basis 这 3 个属性的复合属性，⽤来定义⼦元素如何分配⽗元素的空⽩空间。语法格式为：
1. flex: none |[<"flex-grow"><"flex-shrink">?||<"flex-basis">]
取值为关键字 none 时，相当于 flex-grow 的值为 0、flex-shrink 的值为 0、flex-basis的值为 auto。也就是说，flex: none 就相当于 flex: 0 0 auto。除此之外，flex属性还可以使⽤以下常⽤值：
1） flex: initial，这是 flex属性的初始值，它表⽰ flex-grow、flex-shrink、flex-basis 这 3 个属性均使⽤默认值，就相当于flex: 0 1 auto。
2） flex: auto，相当于 flex: 1 1 auto，表⽰⼦元素的实际尺⼨为 width 或 height 属性的值，并⼦元素可以根据弹性容器的空间⾃由伸缩。
3） flex: <positive-number>，相当于 flex: <positive-number> 1 0%，表⽰为⼦元素预留的主轴尺⼨为0，并根据设置的⽐率分配弹性容器的剩余空间。如果⼀个伸缩容器⾥的所有项⽬都使⽤此模式，则它们按各⾃指定的伸缩⽐率分配弹性容器的剩余空间。
align-self属性
align-self属性⽤来定义当容器在侧轴⽅向上有额外的空⽩空间时，该⼦元素如何分配多余的空间，或容器的空间不⾜时，如何分配溢出的空间。
align-self属性⽤来覆写容器上 align-items属性，除了 align-items属性的所有可选值外，align-self属性还可以设置为 auto，表⽰其计算值是弹性容器的 align-items属性值；如果弹性容器未定义 align-items属性，则为 stretch。
关于作者
歪脖先⽣，⼗五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《》、《》、《》、《》、《》、《》，并全部在上开源。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论