要来介绍大家最爱用的 Flexbox 了，以往兼容性还不太好的时候，大多都是使用表格（table）属性来进行排版，也容易出问题，现在科技进步迅速，浏览器也持续跟进，IE 也要进入历史了，只要用简单的语法，就能安排元素在网页上各自的位置，非常的方便好用又弹性！还不快学起来！

为何称为弹性盒？

Flexbox 之所以被称之为弹性盒，是因为可以随着视窗的尺寸，改变自己布局的方式，使用起来非常弹性，且易於使用，所以深受大家喜爱。

随着容器跟着伸缩

Flexbox 规则

要了解 Flexbox ，就要先了解最基础简单的 Flexbox 父容器规则。

当我们为父容器（蓝框）添加 display: flex; 属性後，其内部的子元件（灰色方形）将会以主轴（红色箭头），依序排列（红色数字）与分布，并以交错轴（绿色箭头）让子元件互相对齐基准线（方形上的绿色线）。

• 由父容器设定 display: flex;，影响子元件布局
• 根据主轴方向安排子元件排列方向与分布
• 根据交错轴设定对齐基准线。

父容器的设定

怎麽主导子元件排列方向（flex-direction）

看完上面的规则後，我们发现有一个主轴负责控制排列方向与布局。

• flex-direction预设的值是row，指水平排列
  

• 当flex-direction值设row-reverse，指水平翻转排列
  

• 当flex-direction值设column，指垂直排列

• 当flex-direction值设column-reverse，指垂直翻转排列

控制主轴是否换行（flex-wrap）

Flexbox 弹性盒有个特性，当没有特别设定要换行时，它预设是会想尽一切办法把子元件都塞一行，如下图，正方形因为弹性盒的缘故，被压缩成长方形。

当你设定flex-wrap: wrap;，塞不下的时候，它就会自动换行了

当你设定flex-wrap: wrap-reverse，除了会自动换行，而且是反向换行。

控制主轴的布局（justify-content）

使用属性justify-content，设定主轴布局

• flex-start，预设是这个，往主轴起始点对齐
• flex-end，往主轴末端对齐
• center，往主轴中央对齐
• space-between，平均分配主轴位置，贴齐两端
• space-around，平均分配主轴留白的部分（头尾留白处相加会与中间留白处相等，就像跑马灯元素间距离相等）

控制一行，交错轴的对齐（align-items）

使用属性align-items，设定主轴布局

• flex-start，预设是这个，往交错轴起始点对齐
• flex-end，往交错轴末端对齐
• center，往交错轴中央对齐
• baseline，依照内容文本对齐
• stretch，在没写死子元件大小下，子元件自动撑满交错轴。

上图数字代表行高倍率line-height，用来撑高以好展示效果

控制多行，交错轴的对齐（align-content）

当弹性盒子元件有换行时，才有作用，在单行时无作用！

• flex-start，预设是这个，往交错轴起始点开始排列
• flex-end，往交错轴末端开始排列
• center，往交错轴中央开始排列
• space-between，平均分配交错轴位置，贴齐两端
• space-around，平均分配交错轴留白
• stretch，平均分配交错筹位置

子元素设定

已经了解 Flexbox 最常用的部分了，再来就是控制子元件的 flex，也是比较困难难懂精随的部分，搞懂了，成功就离你不远了！

利用 flex 来自动帮你安排大小

flex 总共又有划分三个属性

• flex-grow，负责管理放大这个部分，预设是 0（不会放大），当有多个子元件设定时，数字代表比例
  

• flex-shrink，负责管理缩小这个部分，预设是 1 （随父容器压缩），设定为 0 时，则不会压缩
  

• flex-basis，负责管理基础大小的部分，有压缩，就会有设置基础大小，避免被压太小。

• flex的简写方式，flex: <grow> <shrink> <basis>;，当只有写一个值时，那个值会代表 grow 值

想来点不一样的对齐方式？（align-self）

有时候想对子元件个别设定对齐方式，就可以个别对子元件设定align-self。

设定与align-items相似。

我任性！就想自订顺序（order）

用来设定顺序，预设为 0 ，数字越大越靠近主轴末端，反之越靠近起始点。

恭喜你！又多认识了一个垂直置中的好方法

盒模型那一篇已经介绍了使用 mragin: 0 auto; 来把元素置中，现在又多认识了 Flexbox，恭喜你又多认识了一个把元素置中的好方法了，前面有介绍 DOM tree ，认识到文本也是单独一个 DOM 节点，我们就可以利用 Flexbox 来达到水平垂直置中的效果了！

总结

当初在学 Flexbox，主要是透过 六角学院副校长——卡斯伯的 图解：CSS flex属性一点也不难 学习的，让我受益良多，另外也推荐两款 Flexbox 小游戏， Flexbox Froggy 与 flex Pirate 海盗船，对认识 Flexbox 效果满好的，下一篇将进入我们的定位（Position）与浮动（float）章节

参考资料

• 图解：CSS flex属性一点也不难