逆天的flexbox布局

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

Flexbox兼容性参考

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

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

创建flex容器

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

.flexcontainer {
   display: -webkit-flex;
   display: flex;
}

将 flex项目排成一行

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

/*On the flex container*/
.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
}

http://www.gbtags.com/gb/debug/afeb2004-4619-493e-83ed-70163acb1f37.htm

将 flex项目排成一列

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
}

http://www.gbtags.com/gb/debug/8b4805e0-97c6-4f55-8f73-1147512b61e8.htm

将flex项目移动到顶部

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

.flexcontainer {
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row; 
   flex-direction: row;
   -webkit-align-items: flex-start;
   align-items: flex-start;
}

向左移动flex项目

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

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row; 
   flex-direction: row;
   -webkit-justify-content: flex-start;
   justify-content: flex-start;
}

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column; 
   flex-direction: column;
   -webkit-align-items: flex-start;
   align-items: flex-start;
}

向右移动flex项目

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-justify-content: flex-end;
   justify-content: flex-end;
}

http://www.gbtags.com/gb/debug/349265e8-7c1e-48f8-ae9a-35d97b999664.htm

 

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   -webkit-align-items: flex-end;
   align-items: flex-end;
}

http://www.gbtags.com/gb/debug/d2881166-2e13-436e-bda2-b03b676721ba.htm

 

居中

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

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row /* works with row or column */
   flex-direction: row;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

http://www.gbtags.com/gb/debug/16dd2af9-9ad9-4b94-9c05-b175436d2454.htm

http://www.gbtags.com/gb/debug/043c4b60-63cb-40e7-a4eb-76fcf13743f7.htm

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

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

.bigitem {
   /* This will be twice as big as the small item. */
   -webkit-flex: 2 0 0; 
   flex: 2 0 0; 
}
.smallitem {
   -webkit-flex: 1 0 0;
   flex: 1 0 0;
}

多重行包装多个flex项目

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

/* On the flex container */
.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   /* You can set flex-wrap and flex-direction individually */
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   /* Or do it all in one line with flex flow */
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
   /* tweak the where items line up on the row */
   /* valid values are: flex-start, flex-end, space-between, space-around, stretch */
   -webkit-align-content: flex-end;
   align-content: flex-end;
}

多重列包装多个flex项目

display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-flow: column wrap;
   flex-flow: column wrap;
   -webkit-align-content: stretch;
   align-content: stretch;
}

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

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

.flexcontainer {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-flow: column wrap;
   flex-flow: column wrap;
   -webkit-align-content: center;
   align-content: center;

}

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

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

/* On the flex item to pin */
.left {
   -webkit-align-self: flex-start;
   align-self: flex-start;
}

.right {
   margin-left: auto;
}

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

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