如果想快捷的使用flex布局，请翻阅到底部。
FlexBox 弹性盒布局主要包括两个部分，一个是container 容器，一个是items 子项。
把普通的盒布局变成弹性盒布局的方法是给父级容器‘display：flex’（或者display：inline-flex），考虑到webkit内核兼容性，写的时候要加-webkit前缀；设置为flex弹性布局以后子元素的float，clear，vertical-align属性将会失效。
然后子项加上属性flex：整数数字（表示比例），或者不加属性flex属性，设置宽或者高（跟主轴方向有关）固定数值，比如100px；则子项不受弹性盒布局的限制；容器除这个子项之外其他有flex的子项按比例分配宽度。
图片来自网络
（1）主轴（main axis）：通过这个伸缩盒子特性，可以很好的管理伸缩项目在伸缩盒子中的布局方向。这个方向可以是从左到右，从上到下，从下到上，从右到左。这个主轴的方向可以通过flex-direction属性来定义值分别为row，row-reverse，column，column-reverse。
（2）主轴起点（main start）和终点（main end）：伸缩项目从主轴起点开始布局到终点结束。属性justify-content就是根据主轴的起点和终点赋予start，center，end等值来布局的。
（3）主轴长度（main size）：伸缩项目在主轴方向上的宽度或者高度就是项目的主轴长度。
（4）侧轴（cross axis）：与主轴垂直的轴是侧轴，所以说，侧轴的方向是由主轴决定的。
（5）侧轴的起点（cross start）和终点（cross end）：伸缩项目充满伸缩行，并且伸缩行从侧轴起点开始布局容器到侧轴终点结束。
（6）侧轴长度（cross size）：伸缩项目在侧轴方向上的宽度或者高度就是项目的侧轴长度。
容器是父级盒子，分为主轴（main axis）和纵轴（cross axis）
1.flex-direction
默认是按照主轴显示。不过也可通过flex-direction属性设置主轴方向。四个值代表的主轴方向：
row: 从左到右
row-reverse: 从右到左
colum: 从上到下
colum-reverse: 从下到上
图片来自网络
2.flex-wrap
flex-wrap设置当内容超出之后是否折行。
nowrap：不换行，而是通过收缩每一个孩子的宽度来挤在一行。
wrap: 换行。
wrap-inverse: 换行，但是折行方向相反，（比如默认是折到下一行，但是这个属性会导致折到上一行）。
效果图如下：
图片来自网络
3.flex-flow
flex-direction 和 flex-wrap 的组合写法。
4.justify-content
不知道如何准确翻译 justify 这个词。它的作用是定义了如何分配剩余的空白区域。
flex-start：主轴方向
flex-end: 主轴反方向
center: 挤在中间
space-between: 中间有空白。
space-around: 中间和两边都有空白。其中两侧的空白是中间的一半宽度，可以理解为每个孩子两侧都有相同宽度的空白，并且空白不合并。
效果图：
图片来自网络
5.align-items
align-items属性定义项目在交叉轴上如何对齐。
.box{align-items:flex-start | flex-end | center | baseline | stretch;}
以上是关于container的属性，接下来看一下items 的属性设置。
图片来自网络
1.align-self
单独在当前孩子上覆盖了 align-items 属性。
2.order
order:<integer>给子项排序。
3.flex-grow
定义了主轴上，孩子分配剩余空白区域的比例。
4.flex-shrink
定义缩小比例，如果孩子的总宽度超过了容器宽度（主轴）,然他们按比例来缩小一定的宽度从而可以在容器中装下。
5.flex-basis
分配空白之前，子项的宽度，默认是 `auto`，也就是孩子本身的宽度。
6.flex
flex属性是flex-grow,flex-shrink和flex-basis的简写，容器的分配比例（推荐使用）
常用：
1）父盒子声明flex布局；（假设没有设置布局方向，默认水平布局）
display:flex;
兼容性写法：
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
设置主轴（水平方向）对齐方式
justify-content：space-between；
设置交叉轴（垂直方向）对齐方式
align-items：center;
2)子盒子
父盒子分配比例：
flex:1；
兼容性写法：
.flex-1{ -webkit-box-flex:1; -webkit-flex:1; -ms-flex:1; flex:1;}
也可以直接设置width固定宽度，剩余盒子按比例分配。
网友评论