这是我参与更文挑战的第1天，活动详情查看： 更文挑战
前言
Flex 布局由W3C于2009年提出。它可以简便、完整、响应式的实现各种页面布局。Flex支持情况如下（基本不用担心兼容性问题哦！什么？你还在用IE低版本？这边建议您把老板开了换个老板呢~）：
虽然Flex布局支持情况这么好，但还是有好多同学不会用。有的习惯了用float、display、position来布局，所以面试的时候多问两句就什么都不知道了。之前有面试官跟我吐槽说，招了一个前端，工作中发现他所有布局全部用position定位来写（高，实在是高！）。
不过说起来，Flex很多属性我自己也忘了怎么用，甚至纯手打的话单词还会拼错。如果你也和我一样，就一起来通过这篇文章重新学习巩固一下Flex知识吧~
容器和项目
1，任何一个盒子都可以被指定为 flex 布局，可以对盒子内部的元素使用 flex 布局。
2，我们把指定 flex 布局的盒子称为容器，容器内部的元素称为项目。
3，容器和项目都有六种属性。
指定flex布局
display: flex | inline-flex;
可根据布局需要，指定flex容器盒子是块级元素还是行内块元素。
**注意：**当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效哦~
下面我们来详细看一下容器属性和项目属性吧~
容器属性
下面例子中，如无说明，则项目元素宽高均为100px，容器宽高均为800px。
容器属性共有六个：
1，flex-direction 排列规则
用于控制项目排列方向与顺序，即规定主轴和交叉轴的方向。
flex-direction：row(默认) | row-reverse | column | column-reverse;
row: 横向排列，项目排列顺序为正序。
row-reverse: 同为横向排列，但项目顺序为倒序。
column: 与row相反，为纵向排列，项目顺序为正序。
column-reverse： 同为纵向排列，项目顺序为倒序。
2，flex-wrap 换行规则
用于控制项目换行规则。
flex-wrap：nowrap(默认) | wrap | wrap-reverse;
nowrap： 不换行。宽度不够的话会等比缩减项目元素宽度，权重比项目元素的宽要高。（如把项目元素的宽都改为200px时，但实际宽度却为133.34px。如下）
wrap： 换行，项目元素根据自身宽度进行排列，如果超出父容器宽度则自动换行（如把项目元素的宽都改为200px时。如下）。
wrap-reverse： 换行，效果与wrap相反，第一排会紧贴容器底部，从下往上换行。
3，flex-flow 排列与换行
flex-flow属性是flex-deriction与flex-wrap属性的简写集合。
默认为：row nowrap（横向排列，不换行）
4，justify-content 主轴的对齐规则
控制项目在主轴的对齐方式。
justify-content：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;
**flex-start：**左对齐。
**center：**居中。
flex-end： 右对齐。
**space-between：**沿主轴排列，左右两端对齐，项目元素间距相等，左右两侧项目元素紧贴容器。
**space-around：**沿主轴排列，项目之间间距为左右两侧项目到容器间距的2倍。
space-evenly： 沿主轴排列，项目之间间距与项目与容器间距相等。
5，align-items 交叉轴的排列规则
控制项目在交叉轴排列方式。
align-items：stretch(默认) | flex-start | flex-end | center | baseline;
**stretch：**如果项目元素没有设置高度，或高度为auto，则占满整个容器（如把项目元素高度改为auto）。
**flex-start：**项目元素紧贴容器顶部。
**flex-end：**与flex-start相反，项目元素紧贴容器顶部。
center： 交叉轴的中心位置排列。（如把第二个项目元素高改为200px）
baseline： 以项目元素内文字的基线为参照进行排列。（如把第二个项目元素高改为200px,line-height也为200px）
6，align-content 多行项目的对齐规则
控制多行项目的对齐方式，如果项目只有一行则不会起作用。所以要设置flex-wrap: wrap;或flex-wrap: wrap-reverse;
align-content： stretch(默认) | flex-start | flex-end | center | space-between | space-around | space-evenly;
stretch： 在项目没有设置高度，或高度为auto情况下让项目元素撑整个容器。（如项目元素高度设置为auto时）。
flex-start： 从交叉轴起始位置对齐。
center： 从交叉轴中间位置对齐。
flex-end：从交叉轴尾部位置对齐。
pace-between：同 justify-content:pace-between; 沿交叉轴排列，两端对齐，项目元素间距相等，左右两侧项目元素沿交叉轴紧贴容器。（如把项目元素宽改为200px）
space-around：同 justify-content:space-around; 沿交叉轴排列，项目之间间距为左右两侧项目到容器间距的2倍。（如把项目元素宽改为200px）
space-evenly：同 justify-content:space-evenly; 沿交叉轴排列，项目之间间距与项目与容器间距相等。（如把项目元素宽改为200px）
项目属性
1，order 项目元素排列顺序
决定项目元素排列顺序。
order: 0（默认）;
数值越小，项目排列越靠前。（如给项目元素12设置 order 为 -1）
2.flex-grow 项目元素是否占满剩余空间
项目元素是否占满剩余空间。
flex-grow: 0（默认）;
默认不占满；注意，即便设置了固定宽度，也会占满。
如果三个项目元素分别设置为0，1，2，则第一个项目元素按自身宽度，第二个占的空间是1份的话，第三个所占空间是第二个的两倍。
（如项目元素宽度都设置为200px）
3，flex-shrink 项目元素是否缩小适应空间
项目元素在容器空间不足时是否缩小。
flex-shrink: 1（默认，等比缩小）| 0 （不缩小）;
默认空间不足时项目元素一起等比缩小；注意，即便设置了固定宽度，也会缩小。（如项目元素1的flex-shrink设置为0）
4，flex-basis 设置项目宽度
设置项目元素宽度，默认auto。
flex-basis: auto(默认);
默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis: 200px，则权重会width属性高，会覆盖widtn属性。（如设置项目元素1的flex-basis为300px,width为100px，实际生效还是300px）
5，flex 属性简写
flex-grow，flex-shrink与flex-basis三个属性的简写。后两个属性可选。
flex: 0 1 auto(默认);
用于定义项目元素放大，缩小与宽度。
该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。
6，align-self 其它项目不同的对齐方式
align-self属性允许单个项目元素有与其他项目元素不一样的对齐方式，可覆盖容器的align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
align-self: auto(默认) | flex-start | flex-end | center | baseline | stretch;
auto： 继承父容器的align-items属性。
flex-start： 当前元素对齐方式为 align-items：flex-start；
flex-end： 当前元素对齐方式为 align-items：flex-end；
center： 当前元素对齐方式为 align-items：center；
baseline： 当前元素对齐方式为 align-items：baseline；
stretch： 如果没父元素，则默认stretch。
后记
只有自己认认真真再敲一遍才能彻底搞懂flex布局，当然啦，这并不算难，我重新敲了一遍之后，发现flex布局其实还蛮简单的。并且还对其中的属性有了新的理解，毕竟温故而知新嘛，一起加油吧！
