[快速入门前端 35] Flex Box 弹性盒子

Flex Box

flex box，又称弹性盒子，是一种为了让网页适应不同尺寸的设备所衍伸出来的 display 方式。在 flex 出现之前，我们大多利用元素 block、inline 的特性，或搭配 position 和 float 来进行网页排版，不过这些方式设定较多、也比较複杂，而现在 flex 提供了我们新的选择。

在正式开始介绍 flex box 前，我们先来看看 flex 能做到什么事呢？假设今天我们要将父元素中的多个子 div 并排排列在同一行，我们可以使用 float 搭配 clear float ( 具体用法可以参考此篇文章 )。但现在我们只需要将父元素加入 display: flex; 就可以轻鬆的让里面的子元素在同一行排列。

Flex Box 相关概念

Flex 和 Inline Flex
在 flex box 的概念中，将元素开启 flex 的 display 属性值有两种，分别是 display: flex 和 display: inline-flex，差别在于 flex container 是否会有 inline-block 元素的特性。

flex
inline-flex

Flex Container： 指开启 flex 的元素，也就是有 display: flex; 或 display: inline-flex; 属性的元素，通常为需要并排的元素的父元素。
Flex Item： 指开启 flex 元素中的子元素，会依照 flex 特有的布局流 (flex flow) 依序进行排列。
Main Axis 主轴： 指 flex item 在 flex 元素中排列的方向，预设为 row，也就是水平由左至右排列。main axis 可以以 CSS 属性指定。
Cross Axis 交叉轴： 指与主轴垂直的轴，主轴预设为水平方向，交叉轴就是垂直方向。

Flex Direction 指定主轴方向

有了基本概念之后现在我们来看一些关于 flex 的设定吧。
属性： flex-direction
说明： 改变 flex item 排列的方向
属性值：

row：预设，水平由左到右排列row-reverse：与 row 相反，水平由右到左排列column：垂直由上至下排列column-reverse：与 column 相反，垂直由下至上排列

flex-direction 可以改变 flex item 排列的方向，如下图：

Flex Wrap 主轴换行方式

属性： flex-wrap
说明： 设定在 flex-container 于主轴方向的空间不够 flex-item 元素排列时的换行方式
属性值：

nowrap：预设，flex-item 元素会压缩自己的宽度挤在一行wrap：自动换行，会呈现多行wrap-reverse：自动换行，但 cross axis 的方向颠倒，也就是预设第一行在最下方，最后一行在最上方

主轴对齐方式 - Justify Content

属性： justify-content
说明： 指定 flex-item 在主轴方向的对齐方式，若主轴方向为预设的 row，则可以用来设定水平对齐的模式
属性值：

flex-start：对齐主轴开始位置，主轴预设为从左到右，所以 flex-start 为置左flex-end：对齐主轴结束位置，预设为置左center：水平置中，flex-item 间没有间隔space-between：最左和最右的元素分别贴齐主轴开始和结束位置 (也就是左右两边)，其他元素平均分配在中间space-around：平均分配空间，使每个元素都有相同的左右间隔space-evenly：平均分配空间，使每个元素和元素间、元素和边框间间隔都相同

对称轴对齐方式 - Align Items 和 Align Content

在对称轴对齐方面分为两个属性，align-items 负责单行时的垂直对齐；而 align-content 则负责指定多行时整个内容的对齐方式。
属性： align-items
说明： 指定只有一行 flex-item 时，对称轴 (预设为垂直方向) 的对齐方式
属性值：

flex-start：对齐对称轴开始位置，预设为父元素顶部flex-end：对齐对称轴结束位置，预设为父元素底部center：垂直置中，若每个 flex-item 高度不同则以中线对齐置中stretch：预设，若 flex-item 没有指定高度则将元素的高度撑开到父元素 (flex-container) 的高度baseline：以 flex-item 中内容的基线为对齐线

属性：
说明： 常用于多行时指定对称轴 (预设为垂直方向) 的对齐方式
属性值：

flex-start：对齐对称轴开始位置，预设为父元素顶部flex-end：对齐对称轴结束位置，预设为父元素底部center：垂直置中stretch：预设，若 flex-item 没有指定高度则将多行均分佔满整个父元素的高度space-between：第一行和最后一行分别贴齐对称轴开始和结束位置 (预设为上下边缘)，其他行则平均分配在中间spce-around：平均分配每一行的空间，使每个元素都依偶相同的上下间隔space-evenly：平均分配空间，使每行之间、及行和边框之间间隔都相同

Flex Item 的伸缩性

在之前的範例中，也许你会发现 flex container 的换行预设是不换行，也就是说当 flex-item 在主轴的长度 (预设是宽度)大于父元素时会自动压缩；反之，在父元素在主轴的长度 (宽度) 远大于子元素的总和时，我们也能够让子元素自动拉长到填满父元素。

Flex Basis 基础长度

flex-basis 可以指定 flex item 在主轴方向的长度，并依主轴方向取代该元素的宽度或高度 (当主轴是水平方向时为元素宽度，主轴是垂直方向时为元素高度) 来进行元素的伸缩运算。

Flex Grow 拉长

flex-grow 可以指定元素拉长的比例，预设为 0 (不拉长)。
以预设主轴为例，flex grow 的算法为:
1. 计算父元素多余的宽度： 父元素宽度 - 所有元素的 flex basis 的总和

2. 计算多余的宽度可以分给每个 grow 多少： 多余宽度 / 总共有几个 flex-grow

3. 计算元素拉长后的宽度： 每个元素原本的宽度 + 每个 grow 多出的宽度 x 该元素有几个 grow

Flex Shrink 压缩

当 flex-wrap 为 nowrap (预设) 时，若子元素超过父元素在主轴的範围，则子元素会自动压缩。在计算上因为考量到每个元素大小可能不同，若都压缩同样大小则较小的元素可能会直接被压没，所以计算压缩比例时除了 flex-shrink 值外也会加入元素原本的宽度进行运算，如下例子：
1. 计算子元素超出父元素多少： 子元素宽度总和 - 父元素宽度

2. 计算元素压缩比例： ( 每个元素宽度 x 该元素 flex-shrink 值 ) / ( 每个元素宽度 x 该元素 flex-shrink 值 ) 的总和
(预设 flex-shrink 皆为 1)
分母：( 200px x 1 flex-shrink ) + ( 300px x 1 flex-shrink ) + ( 400px x 1 flex-shrink ) = 900
元素 1 比例：( 200px x 1 flex-shrink ) / 900 = 2/9
元素 2 比例：( 300px x 1 flex-shrink ) / 900 = 1/3
元素 3 比例：( 400px x 1 flex-shrink ) / 900 = 4/9
3. 元素最终大小： 元素宽度 - 该元素需压缩的大小 = 元素宽度 - ( 超出宽度 x 比例 )
元素 1：200px - (200 x 2/9) = 133.34px
元素 2：300px - (300 x 1/3) = 200px
元素 3：400px - (400 x 4/9) = 约 266.66px

Flex 子元素的排序和对齐

Order

在 flexbox 中若想要改变 flex-item 子元素的显示顺序，可以加入 order 属性，order 属性有点像之前定位中的 index，它能够在不改变程式的情况下调整 flex-item 的排列顺序，order 值预设为 0，值越小元素会排在越前面。
範例：

.box1 {    order: 1;}.box2 {    order: -1;}.box3 {    order: 2;}

Align Self

之前我们调整主轴或对称轴的对齐方式时都是针对父元素设定，若想单独设定某个子元素 (flex-item) 本身则可以使用 align-self 来指定某个子元素在对称轴的对齐方式。align-self 的属性值与 align-items 相同，範例如下：

---

上一篇：[快速入门前端 34] 进阶样式属性 (4)：Animation 动画
下一篇：[快速入门前端 37] 初探 JavaScript
系列文章列表：[快速入门前端] 系列文章索引列表