如何正确使用 FLEX-BOX

“Flex-box”（全称：CSS Flexible Box Layout Module）是css3中新的布局方式。它可以实现弹性布局，尤其运用在响应式设计中，配合media query可以为布局带来很多新的可能。

Flex-box模型的核心在于内含item的尺寸是可以是弹性的。container可以根据本身尺寸的变化来动态地调整item的尺寸。当container有空白空间时，item可以扩展尺寸以占据额外的空间；当容器中的空间不足时，item可以缩小尺寸。类似于table中的td，大大简化了因浏览器大小的变化二对内容布局进行的调整。

使用方式

flex-box由外层容器flex container和子元素flex item组成。使用时，只要将外层容器container 的“display”设置为”flex”，里面的元素自动变成flex item。



<div class=”flex-container”><div class=”flex-item”></div><div class=”flex-item”></div><div class=”flex-item”></div>
</div>.flex-container{display:flex;}

基本属性

1. flex container属性

flex-direction

row（默认值)：从左到右水平方向排列；
row-reverse：从右到做水平方向排列；
column：从上到下垂直方向排列；
column-reverse：从下到上垂直方向排列。

flex-wrap

nowrap（默认值）：强制一行；
wrap：自动换行；
wrap-reverse：与 wrap 的含义类似，但下一行的位置排序方向与主方向相反。

flex-flow 将以上两种属性结合，如flex-flow: row wrap //即容器中的元素按水平方向排列，自动换行。

justify-content 用于分配container填充item后所剩余的空间。

flex-start：item从起始位置依次排列。例如123▇ ▇ ▇ ▇；
flex-end：item从结束方向依次排列。例如▇ ▇ ▇ ▇321；
center：item居中排列，例如 ▇ ▇123▇ ▇；
space-between：空白空间在item之间平均分配，如1▇ ▇2▇ ▇3；
space-around：类似space-between，但item距边距也有空白，如▇1▇2▇3▇。

align-items 用于设置对齐方式，如果为横向排列时，其属性可以这样理解

flex-start：上对齐；
flex-end：下对齐；
center：居中对齐；
stretch：拉伸对齐，（但内含item的高度需设置成auto）。

align-content属性与justify-content一致，用于行的控件排列。

2. flex-item属性

外层flex container控制是子元素的排列方式与对齐方式，内含的子元素flex item可以通过定义具体的width和height，也可以通过缩放来控制自身的尺寸。

flex-basis 类似width属性，用于确定item初始的尺寸

flex-grow 默认值为1，"flex-grow"属性的值表示的是当container有多余的空间时，不同item所获得空间的比例。比如，一个container中有 3 个item，其"flex-grow"属性的值分别为 1，2 和 3，那么当container中有剩余空间时，这 3 个条目所获得的空白空间分别占全部空间的 1/6、1/3 和 1/2。

flex-shrink 与flex-grow相反，表示的是当container的空间不足时，各个条目的尺寸缩小的比例。

flex 以上三个属性的结合。格式是"none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]"。该属性的值的 3 个组成部分的初始值分别是"0 1 auto"。当属性"flex"的值为 none 时，相当于"0 0 auto"。当组成部分"flex-basis"被省略时，其值为 0%。

例子



<div class=”flex-container”><div class=”flex-item1”></div><div class=”flex-item2”></div><div class=”flex-item3”></div>
</div>.flex-item1{width：100px;
}
.flex-item2{flex:2; /*flex-grow 的值为 1，flex-shrink 的值为 1，flex-basis 的值为 0%*/
}
.flex-item3{flex:1;
}

效果为item1为100px,剩余空间item2与item3的比为2：1

兼容性

flex-box这些年来调整了三次，带来了很多兼容性的问题

新规范：2013年最新版本规范的语法，即"display: flex"
中间版本：2011 年的非官方规范的语法，即"display: flexbox"
老规范：2009 年的规范的语法，即"display: box"

Chrome：21+（新）20-（老）
Safari： 6.1+（新）3.1+（老）
Firefox：22+（新）2-21（老）
IE：10（中间）
Android: 4.4+（新）2.1+（老）
iOS: 7.1+（新) 3.2+（老）

所以在开发时，并不能简单的使用，必须新老规范一起用，才能完整的实现这个功能。

.flex-container{display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6*/display: -moz-box;         /* OLD - Firefox 22- */display: -ms-flexbox;      /* TWEENER - IE 10 */display: -webkit-flex;     /* NEW - Chrome 20-,Android 2.1-4.3 */display: flex;             /* NEW */
}
.flex-item{-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */-moz-box-flex: 1;         /* OLD - Firefox 22- */width: 20%;               /* For old syntax, otherwise collapses. */-webkit-flex: 1;          /* Chrome */-ms-flex: 1;              /* IE 10 */flex: 1;                  /* NEW*/
}
/*不同情况下需要添加显性的宽度，才能防止老语法下的浏览器崩溃。*/

这才算是正确使用flex-box，可以在几乎所有的浏览器下运行良好，当然除了万恶的IE：）

参考文章

如有错误，还请轻轻拍砖。：）