Web页面布局的发展经历了表格布局->定位布局->浮动布局->Flexbox布局的演变，每种布局都反映了当时的对布局需要。本文主要对CSS3中的Flexbox的原理、语法和使用进行探讨。

介绍

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

注意: float、clear和vertical-align属性将会失效。

容器属性

flex-direction

flex-direction该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置，默认值row

.flex-container {
  -webkit-flex-direction: row | column | row-reverse | column-reverse | initial | inherit; /* Safari */
  flex-direction: row | column | row-reverse | column-reverse | initial | inherit;
}

值	描述
row	默认值，主轴与行内轴方向作为默认的书写模式。即横向从左到右排列（左对齐）
column	对齐方式与row相反
row-reverse	主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
column-reverse	对齐方式与column相反。

运行结果

flex-wrap

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行，默认值nowrap。

.flex-container {
  -webkit-flex-wrap: nowrap | wrap | wrap-reverse; /* Safari */
  flex-wrap:         nowrap | wrap | wrap-reverse;
}

注意: 在Android4.4一下版本及较老版本的浏览器对于该属性不支持。

flex-flow

flex-flow这个属性是flex-direction和flex-wrap属性的简写，默认值row nowrap。

.flex-container {
  -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */
  flex-flow:         <flex-direction> || <flex-wrap>;
}

justify-content

justify-content属性用来指定flex项目在flex容器沿着主轴在当前行的对齐方式，默认值flex-start。

.flex-container {
  -webkit-justify-content: flex-start | flex-end | center | space-between | space-around; /* Safari */
  justify-content:         flex-start | flex-end | center | space-between | space-around;
}

值	描述
flex-start	默认值，左对齐
flex-end	右对齐
center	居中对齐
space-between	两端对齐
space-around	每两个项目间的间距一样，项目间的间距是项目和容器间距的2倍

align-items

.flex-container {
  -webkit-align-items: flex-start | flex-end | center | baseline | stretch; /* Safari */
  align-items:         flex-start | flex-end | center | baseline | stretch;
}

值	描述
flex-start	左对齐
flex-end	右对齐
center	居中对齐
baseline
stretch	默认值，每两个项目间的间距一样

align-content

align-content属性将flex容器内的行在flex容器中侧轴排列方式，类似于justify-content在主轴方向的单个Flex项目对齐方式。
Flex项目在flex容器中多行显示行，其多行在flex容器的侧轴方向对齐方式。
注意: 单轴线的情况下该属性不起作用

.flex-container {
  -webkit-align-content: flex-start | flex-end | center | space-between | space-around | stretch; /* Safari */
  align-content:         flex-start | flex-end | center | space-between | space-around | stretch;
}

项目属性

order

order定义项目的排列顺序，数值越小，越靠前，默认值为0。
注意: 值可以为负数

.flex-item {
  -webkit-order: <integer>; /* Safari */
  order:         <integer>;
}

flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
注意: 负数是非法的

.flex-item {
  -webkit-flex-grow: <number>; /* Safari */
  flex-grow:         <number>;
}

如果所有项目的flex-grow值相同，则他们等分剩余的空间。
如果项目的flex-grow不同，则按比例分剩余的空间，比如一个项目的flex-grow的值为2，其他的为1，则前者分得的空间是其他项目的2倍。
注意: 这个值是指剩余空间的分配比例，如果没有剩余空间的情况下，该属性没有效果。

flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
注意: 负数是非法的

flex-item {
  -webkit-flex-shrink: <number>; /* Safari */
  flex-shrink:         <number>;
}

当flex-shrink为0时，保持项目的原有尺寸不变。

flex-basis

flex-basis属性和width和height属性相同，用来指定flex项目的大小，默认值auto。

.flex-item {
  -webkit-flex-basis: auto | <width>; /* Safari */
  flex-basis:         auto | <width>;
}

flex

flex是一个复合属性，包括flex-grow、flex-shrink和flex-basis，默认值为0 1 auto

.flex-item {
  -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */
  flex:         none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

align-self

align-self可以项目在单独设置交叉轴的对齐属性。默认值为auto，表示与父元素的align-items的值一直，如果父元素没有设置align-items，则等于stretch。
其他值的含义和容器的align-items一致。

.flex-item {
  -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */
  align-self:         auto | flex-start | flex-end | center | baseline | stretch;
}

兼容性

Flexbox布局有三个版本：

old : 最老版本(2009)，display: box
tweener : 过渡版本(2011)，display: flexbox
new : 最新版本，display: flex

浏览器	支持情况
Chrome	20- (old) 21+ (new)
Safari	3.1+ (old) 6.1+ (new)
Firefox	2-21 (old) 22+ (new)
Opera	12.1+ (new)
IE	10 (tweener) 11+ (new)
Android	2.1+ (old) 4.4+ (new)
iOS	3.2+ (old) 7.1+ (new)

在css书写时要注意兼容不同浏览器及版本的差异，如下：

.flex-container {
  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
  display: -moz-box; /* Firefox 17- */
  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  display: -moz-flex; /* Firefox 18+ */
  display: -ms-flexbox; /* IE 10 */
  display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}

可以采用Autoprefixer书写最新的flex样式，会自动补齐兼容部分，如下Sass代码

@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
@mixin flex($values) {
  -webkit-box-flex: $values;
  -moz-box-flex:  $values;
  -webkit-flex:  $values;
  -ms-flex:  $values;
  flex:  $values;
}
@mixin order($val) {
  -webkit-box-ordinal-group: $val;  
  -moz-box-ordinal-group: $val;     
  -ms-flex-order: $val;     
  -webkit-order: $val;  
  order: $val;
}
.flex-container {
  @include flexbox();
}
.flex-item {
  @include flex(1 200px);
  @include order(2);
}

Flexbox布局总结

介绍