逆天的FLEXBOX布局备忘单

 

Flexbox是spankin新推出的一种CSS布局模块，拥有完美的浏览器兼容性！它可以轻易做到垂直居中、重新排序、布局的动态伸展与收缩。

Flexbox兼容性参考

点击查看基本教程介绍（请用电脑上的现代浏览器查看演示）

• 提示：请将浏览器升级到最高版本，确保完整观看工作演示。

创建flex容器

在创建任意flexbox布局之前，先要创建一个flex容器：把display属性设定为flex。在Safari中，还需要添加-webkit前缀。

1. .flexcontainer {
2. display: -webkit-flex;
3. display: flex;
4. }

将 flex项目排成一行

Flex项目是flex容器的子类，它们沿着一条主轴和十字轴排列。主轴在默认情况下是水平的，使项目横向排列成一行。可以切换主轴将flex的方向设置成竖排。

1. /*On the flex container*/
2. .flexcontainer {
3. display: -webkit-flex;
4. display: flex;
5. -webkit-flex-direction: row;
6. flex-direction: row;
7. }

将 flex项目排成一列

1. .flexcontainer {
2. display: -webkit-flex;
3. display: flex;
4. -webkit-flex-direction: column;
5. flex-direction: column;
6. }

将flex项目移动到顶部

如何把flex项目移动到顶部取决于主轴的方向。如果主轴是垂直的，就竖直对齐（align-items）项目；如果主轴是水平的，则两端对齐（justify-content）项目。

1. .flexcontainer {
2. -webkit-flex-direction: column;
3. flex-direction: column;
4. -webkit-justify-content: flex-start;
5. justify-content: flex-start;

1. .flexcontainer {
2. display: -webkit-flex;
3. display: flex;
4. -webkit-flex-direction: row;
5. flex-direction: row;
6. -webkit-align-items: flex-start;
7. align-items: flex-start;
8. }

向左移动flex项目

左右移动flex项目同样取决于主轴的方向。如果flex-direction被设置为row，就justify-content；如果是column，则align-items。

1. .flexcontainer {
2. display: -webkit-flex;
3. display: flex;
4. -webkit-flex-direction: row;
5. flex-direction: row;
6. -webkit-justify-content: flex-start;
7. justify-content: flex-start;
8. }

1. .flexcontainer {
2. display: -webkit-flex;
3. display: flex;
4. -webkit-flex-direction: column;
5. flex-direction: column;
6. -webkit-align-items: flex-start;
7. align-items: flex-start;
8. }

向右移动flex项目

1. .flexcontainer {
2. display: -webkit-flex;
3. display: flex;
4. -webkit-flex-direction: row;
5. flex-direction: row;
6. -webkit-justify-content: flex-end;
7. justify-content: flex-end;
8. }

 

1. .flexcontainer {
2. display: -webkit-flex;
3. display: flex;
4. -webkit-flex-direction: column;
5. flex-direction: column;
6. -webkit-align-items: flex-end;
7. align-items: flex-end;
8. }

 

居中

在flex容器中设置垂直居中或水平居中非常简单。只需要把 justify-content 和/或 align-items 设置到中间。同样，取决于主轴的方向。

1. .flexcontainer {
2. display: -webkit-flex;
3. display: flex;
4. -webkit-flex-direction: row /* works with row or column */
5. flex-direction: row;
6. -webkit-align-items: center;
7. align-items: center;
8. -webkit-justify-content: center;
9. justify-content: center;
10. }

将其中一个flex项目扩展为其他flex项目的X倍

还可以单独增大或减小某个flex项目的大小，需要针对该flex项目的flex属性单独设定为扩大或缩小。

1. .bigitem {
2. /* This will be twice as big as the small item. */
3. -webkit-flex: 2 0 0;
4. flex: 2 0 0;
5. }
6. .smallitem {
7. -webkit-flex: 1 0 0;
8. flex: 1 0 0;
9. }

多重行包装多个flex项目

完成多行包装仅有webkit浏览器和IE11能够支持，Firefox浏览器 尚不支持包装。（悲剧！）

1. /* On the flex container */
2. .flexcontainer {
3. display: -webkit-flex;
4. display: flex;
5. -webkit-align-items: center;
6. align-items: center;
7. -webkit-justify-content: center;
8. justify-content: center;
9. /* You can set flex-wrap and flex-direction individually */
10. -webkit-flex-direction: row;
11. flex-direction: row;
12. -webkit-flex-wrap: wrap;
13. flex-wrap: wrap;
14. /* Or do it all in one line with flex flow */
15. -webkit-flex-flow: row wrap;
16. flex-flow: row wrap;
17. /* tweak the where items line up on the row */
18. /* valid values are: flex-start, flex-end, space-between, space-around, stretch */
19. -webkit-align-content: flex-end;
20. align-content: flex-end;
21. }

多重列包装多个flex项目

1. display: -webkit-flex;
2. display: flex;
3. -webkit-align-items: center;
4. align-items: center;
5. -webkit-justify-content: center;
6. justify-content: center;
7. -webkit-flex-flow: column wrap;
8. flex-flow: column wrap;
9. -webkit-align-content: stretch;
10. align-content: stretch;
11. }

 删除多行或多列flex项目之间的间隙

 align-content 属性支持对包装的flex项目的行与列之间的空间进行分配，可以选择的内容包括： flex-start、 flex-end、space-between、space-around 以及stretch。仅仅删除多列flex项目之间间隙的话，将 align-content 设置为center。

1. .flexcontainer {
2. display: -webkit-flex;
3. display: flex;
4. -webkit-align-items: center;
5. align-items: center;
6. -webkit-justify-content: center;
7. justify-content: center;
8. -webkit-flex-flow: column wrap;
9. flex-flow: column wrap;
10. -webkit-align-content: center;
11. align-content: center;
12.  
13. }

将某个flex项目钉在flex容器边缘

 利用align-self可以单独控制某个元素的align-items值，使用margins向左（或者向右、向上、向下）移动某个单独的元素。例如，在一整列布局中，设置margin-right为auto，可以把单独的一个flex项目移动到最容器左边。

1. /* On the flex item to pin */
2. .left {
3. -webkit-align-self: flex-start;
4. align-self: flex-start;
5. }
6.  
7. .right {
8. margin-left: auto;
9. }

扩展阅读，有关Flexbox布局的其他内容：

1. 下一代的Flexbox布局框架：ptb/flexgrid
2. 一个在线帮助你调试Flexbox布局的工具网站 - flexyboxes
3. 跨浏览器的Flexfox布局实现