弹性盒布局

[xiongshj]

弹性盒布局

这是学习《CSS 权威指南》第 12 章的笔记。

弹性盒基础

弹性盒依赖父子关系。在元素上声明 display: flex; 或 display: inline-flex; 便激活弹性盒布局，而这个元素随之成为弹性容器（flex container），负责在所占的空间内布置子元素，控制子元素的布局。弹性容器的子元素称为弹性元素（flex item）。

使用 display: flex; 声明得到的是块级框，弹性元素在其中布局；使用 display: inline-flex; 声明得到的是行内块级框，弹性元素在其中布局。

把一个元素设为弹性容器之后，只有直接子元素使用弹性盒布局，其他后代元素不受影响。

弹性容器

弹性容器，也叫容器框。display: flex; 或 display: inline-flex; 声明的目标元素变成弹性容器，为其子元素生成弹性格式化上下文。这些子元素不论是 DOM 节点、文本节点，还是生成的内容，都称为弹性元素。

flex-direction 属性

使用 flex-direction 属性控制排布弹性元素的主轴，可以取的值有四个：row、row-reverse、column 和 column-reverse。这个属性适用于弹性容器，初始值是 row。

flex-direction 属性指定在弹性容器中如何摆放弹性元素，即定义弹性容器的主轴，弹性元素就沿这个轴排布。

如果是其他的书写方向，可能会有一些变化。不过不用担心，用到了再查阅。

flex-wrap 属性

如果弹性元素在弹性容器的主轴上放不下，默认情况下弹性元素不会换行，也不会自行调整尺寸。如果通过 flex 属性设定允许弹性元素缩减尺寸，那就缩减尺寸，否则，弹性元素将从容器框的边界溢出。

我们可以在容器上设置 flex-wrap 属性，允许弹性元素换行，变成多行或多列，而不让弹性元素从容器中溢出，或者缩减尺寸，挤在同一行。

flex-wrap 可以取的值有三个：nowrap、wrap 和 wrap-reverse。这个属性适用于弹性容器，初始值是 nowrap。

设为 wrap 或 wrap-reverse 时，如果弹性元素超出了弹性容器的边界，将换行显示放不下的弹性元素。

wrap 是正常的换行，wrap-reverse 是把换的行放到上面（即从下往上）。

flex-flow 属性

flex-flow 属性用于定义主轴和垂轴的方向，以及是否允许弹性元素换行。

flex-flow 属性是 flex-direction 和 flex-wrap 两个属性的简写形式，用于定义弹性容器的换行方式及主轴和垂轴的方向。

.hello {
  flex-flow: column-reverse wrap;
  flex-flow: wrap column-reverse;
}

垂轴：块级元素沿此轴堆叠。在弹性盒中，指放置新弹性元素行的方向（前提是允许换行）。

wrap-reverse 值反转垂轴的方向，把新行添加到前一行的上方或左侧。

flex-direction 和 flex-wrap 对布局有很大的影响，而且二者之间也有不小的影响。如果想设置其中某一个属性，最好两个都设置，此时可以使用规范强烈推荐的 flex-flow 属性。

justify-content 属性

justify-content 属性指明在弹性容器的主轴上如何分布各行里的弹性元素。这个属性应用于弹性容器上，不能用到单个弹性元素上。

这个属性可以取的值有六个：flex-start、flex-end、center、space-between、space-around 和 space-evenly。初始值是 flex-start。

justify-content 属性六个可选值的效果图

（1）设为默认值 flex-start 时，弹性元素紧靠主轴起边。

（2）设为 flex-end 时，弹性元素紧靠主轴终边。

（3）center 把弹性元素作为一个整体，居中显示在主轴尺寸的中点。

（4）space-between 值把每一行里的第一个弹性元素放在主轴起边，把每一行里最后一个弹性元素放在主轴终边，然后在余下的每一对相邻的弹性元素之间放置等量的空白。

（5）space-around 把余下的空间拆开，把各部分的一半分配给每个弹性元素，看起来就像每个元素四周都有等量的不折叠外边距。注意，这意味着任何两个弹性元素之间的距离是第一个弹性元素与主轴起边之间以及最后一个弹性元素与主轴终边之间距离的两倍。

（6）space-evenly 也把余下的空间拆分开，不过每个间距的长度是相等的。这意味着，到主轴起边和终边之间的距离，与弹性元素之间的距离是一样的。

align-items 属性

align-items 属性定义的是弹性元素在垂轴方向上的对齐方式。align-items 应用在弹性容器上，而不能应用到单个弹性元素上。

这个属性有五个可选值，包括 flex-start、flex-end、center、baseline 和 默认的 stretch。

横排演示

竖排演示

弹性元素可以向垂轴起边或终边靠拢，也可以居中，或者经过拉伸，同时靠拢起边和终边。不过 baseline 有点特殊。此时，弹性元素向基线对齐，基线与垂轴起边那一侧的边之间的距离最远的弹性元素将与弹性元素行垂轴起边那一侧的边对齐。

align-content 属性

align-content 属性定义弹性容器有额外的空间时在垂轴方向上如何对齐各弹性元素行，以及空间不足以放下所有弹性元素行时从哪个方向溢出。

align-content 可选的值有七个，包括 flex-start、flex-end、center、space-between、space-around、space-evenly 和 默认的 stretch。

align-content 属性的各个值对额外空间的分配情况

align-content 属性的各个值弹性元素行的溢出方向

align-content 属性指定弹性容器中垂轴方向上的额外空间如何分配到弹性元素行之间和周围。align-content 属性只适用于分为多行显示的弹性容器，对禁止换行及只有一行的弹性容器没有影响。

弹性元素

弹性容器的子代称为弹性元素，不管是子元素，还是元素之间非空的文本节点，或是生成的内容。

文本节点会被放在一个匿名弹性元素中，其行为与其他同辈弹性元素一样，但是不能直接使用 CSS 装饰。

弹性元素的外边距不折叠。float 和 cleat 属性对弹性元素不起作用。vertical-align 对弹性元素没有影响，只用于设定弹性元素中文本的对齐方式。

align-self 属性

align-items 设置的是弹性容器中全部弹性元素的对齐方式，而 align-self 属性能重设单个弹性元素的对齐方式。

align-self有六个可选值，包括 flex-start、flex-end、center、baseline、stretch 和 默认的 auto。

对所有 align-self 属性为默认值 auto 的弹性元素来说，其对齐方式继承自容器的 align-items 属性。其他五个可选值与 align-items 属性的值一样。

flex-grow 属性

flex-grow 属性定义弹性元素的放大比例，默认值是 0，即如果存在剩余空间，也不放大。

flex-shrink 属性

flex-shrink 属性定义弹性元素的缩小比例，默认为 1，即如果空间不足，该弹性元素将缩小。

flex-basis 属性

flex-basis 属性定义弹性元素的初始或默认尺寸，即根据增长因子和缩减因子分配多余或缺少的空间之前，弹性元素的大小。它的默认值是 auto，这时 flex-basis 等于 width（或 height），如果 width（或 height）也是 auto，那么弹性基准回落为 content。

如果既设定了 flex-basis，又设定了 width（或主轴为纵向时的 height），弹性基准的优先级比宽度（或高度）高。

flex-basis 的百分数是相对弹性容器的主轴尺寸计算。

flex 属性

flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写形式，默认值为 0 1 auto。后两个属性可选。

该属性有四个常见的弹性值：

（1）initial（0 1 auto）。

（2）auto（1 1 auto）。

（3）none（0 0 auto）。

（4）数字值。如果 flex 属性只有一个值，而且是正数，那个值将用作增长因子，而缩减因子默认为 0，基准也默认为 0。flex: 3; 与 flex: 3 0 0; 是等效的。

虽然三个子属性可以单独使用，但是强烈建议始终使用简写的 flex 属性。

order 属性

order 属性用于修改单个弹性元素的显示顺序。数值越小，排列越靠前，默认为 0。

小结

加油吧！