栅格系统是个好东西鸭
flex 虽然用的很多(但是就是记不住 QAQ
参考链接
Flex 布局应用
Flex 布局教程：语法篇
flex 布局的基本概念
常用 flex 样式类最全兼容写法详解
兼容性参考： 常用flex样式类最全兼容写法详解
几个概念
flex 布局很早就出现了，但是一些便利的 CSS 属性是在 CSS3 出现的，存在一定的兼容性问题。
flex 布局就是"弹性布局"，具有很高的灵活性。
在 flex 布局里 flex container (flex 容器) 和 flex item (flex 项目) 可以设置对应的 CSS 属性来实现布局。
float 和 clear 属性对于 flex container 无效。
vertical-align 属性对于 flex item 无效。
cloumn-* 属性对 flex item 无效。
以及 flex container 存在两个轴，默认情况下的主轴 main axis (水平) 和交叉轴 cross axis (垂直)，可以根据设置 flex container 的 flex-direction 来变动两个轴的方向。轴开始位置称 start ，有 main start / cross start。 结束位置称 end ，有 main end /corss start 。
flex item 占据的主轴空间称 main size ，占据的交叉空间称 cross size。
图源 使用弹性盒子进行高级布局
flex container 属性
flex container 主要有 7 个属性，主要是用于规定 flex item 的排列方向、排列位置。
display
还是需要设置 display 属性为 flex。
兼容性问题：
display: -webkit-box; /* 老版本语法: Safari 3.1-6, iOS 6-, Android browser, older WebKit browsers. /
display: -moz-box; / 老版本语法: Firefox 19- (buggy but mostly works) /
display: -ms-flexbox; / 混合版本语法: IE 10 /
display: -webkit-flex; / 新版本语法： Chrome 21+ /
display: flex; / 新版本语法： Opera 12.1, Firefox 22+ */
flex-direction
用于定义主轴的方向，确定 flex item 的排列方向。并不会影响交叉轴 cross axis 的方向噢。
默认 row
属性值可以为：
- row
- row-reverse
- column
- column-reverse
row / row-reverse 和 column / column-reverse 会受到 flex container 的 dir 属性的影响。
row 和 row-reverse 的区别在于 main start 和 main end 相反。column 和 column-reverse 的区别同理。
( 也有看到文章称设置 column / column-reverse 时，不会设置 main axis 与 cross axis 同向，而只是设置 flex item 的排列顺序沿 cross axis 方向。
兼容性问题：
// 盒模型垂直布局
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
flex-wrap
设置 flex item 是否换行。
默认 nowrap
属性值可以为：
- nowrap // 禁止换行
- wrap // 允许换行，向下折行
- wrap-reverse // 允许换行，向上折行（就是前面的内容在下面）
wrap 会使多余(需要换行)的部分在上面，但是每一行的 flex item 的排列依旧依据 flex-direction 。
兼容性问题：
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap:wrap;
flex-flow
就是 flex-direction 和 flex-wrap 和简写形式。
flex-flow: <flex-direction> || <flex-wrap>;
默认值也保留两个属性各自的默认值 ，为 row nowrap
就不做排列组合了。
justify-content
定义了 flex item 在主轴上的对齐方式
默认 flex-start
属性值可以为：
- flex-start
- flex-end
- center
- space-between
- space-around
前两个 flex-start 和 flex-end 会使 item 向 main start / main end 对齐，比如主轴为从左到右时，分别为左对齐和右对齐。
center 就是居中对齐。
space-between 和 space-around 的 item 两两之间间隔相等，区别在于 space-around 的 flex item 与 flex container 边框也有间隔（为 item 之间的间隔的 1/2 ，因为 item 之间的间隔是两个 item 的，所以 item 之间的间隔比 item 与边框的间隔大一倍。）
兼容性问题：
// 居中
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-moz-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
也有看到 splatoon 里的居中只写了四句:
-ms-flex-pack: center;
-webkit-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
// 两端对齐
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
-moz-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
align-items
定义了 flex item 在交叉轴上的对齐方式
默认值为 stretch
属性值可以为：
- flex-start （这里不是默认值噢
- flex-end
- center
- baseline
- stretch
前三个与 justify-content 类似。
stretch 是默认值，如果 flex item 未设置高度或者设置为 auto ，则 item 将占满整个 container 的高度。
baseline 使每个 item 的第一行文字的底线对齐。
图源 Flex
兼容性问题：
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-moz-align-items: center;
-ms-flex-align: center;
align-items: center;
align-content
定义多跟轴线的对齐方式，若只有一根轴则无效。
默认值为 stretch
属性值可以为：
- flex-start
- flex-end
- center
- space-between
- space-around
- stretch
当 flex-wrap 的值为 wrap 或者 wrap-reverse 时，会出现多跟轴
图源 Flex
flex item 属性
flex item 也有 6 个属性，主要是规定 flex item 的大小、排列顺序、以及单个的对齐方式。
order
值为 <integer> ，可以为负数，默认为 0
默认情况下（都为 0 时），flex item 按文档顺序排列，但是 order 会影响 flex item 的排列顺序，数值越小排列越靠前，数值相同时，还是按文档顺序排列。
兼容性问题：
-prefix-box-ordinal-group: 2; /* old spec; must be positive */
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
flex-grow
值为 <number> ，负值无效，默认为 0 ，即不放大。
如果 flex item 的 flex-grow 属性值都为 1 则均分（如果有的话的）剩余空间，如果某个 item 的 flex-grow 为 2 ，其他 item 为 1，则他的占据的剩余空间为其他的两倍。其他数值同理。
flex-shrink
指定了 flex item 的收缩规则，仅在 flex item 的默认宽度之和大于 flex container 的宽度时才会坍缩。
值为 <number> ，负值无效，默认为 1 ，即都等比缩小。
如果存在缩小情况，某个 item 的 flex-shrink 为 0 ，其他为 1 ，则它不会进行缩小。
flex-basis
指定了 flex item 在主轴方向上的初始大小。
↑ MDN 说的 ，看不懂对吧 ，其实就是定义了在分配多余空间时，某个 flex item 占据的主轴空间。如果没有使用 box-sizing ，这个属性就决定了 flex item 的内容盒在主轴方向的尺寸。
flex-basis 的优先级高于 height / width (根据主轴方向来确定是会顶替 width 还是 height)
浏览器会根据这个值来计算多余空间。
Note: 当一个元素同时被设置了 flex-basis (除值为 auto 外) 和 width (或者在 flex-direction: column 情况下设置了height) , flex-basis 具有更高的优先级. – flex-basis
默认值为 auto，即保留 flex item 的本来大小。
flex
大宝贝。
就是 flex-grow & flex-shrink & flex-basis 的缩写。
兼容性问题：
// 均分比例
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
align-self
允许某个 flex item 的排列方式与别的不同。
顶替的是 flex container 的 align-item 属性，而不是 justify-content。
默认值 auto，即当 flex container 有 align-item 属性时则继承，没有则为 stretch（因为 align-item 默认值为 stretch）。