什么是flexbox布局？
flexbox的出现是为了解决逐渐复杂的web布局问题，因为这种布局方式很灵活。容器的子元素可以任意方向进行排列。 flex布局模型不同于块模型布局和内联模型布局，块和内联模型的布局计算依赖于块和内联的流方向，而flex布局依赖于flex directions。简单的说：flexbox是布局模块，而不是一个简单的属性，它包含父元素(flex container)和子元素(flex items)的属性。
flexbox布局属性全解析
强大且灵活的flexbox布局，让广大的前端开发者省去了解决盒子浮动所带来的苦恼。在如今手机端开发成为主流时代的，这种布局尤为重要，下面我们一起看看flexbox布局中各种属性所发挥的作用。
1、display(flex container)属性
这个属性是在父元素中设置的，当父元素设置了该属性，那么默认其中的子元素横向布局，就和浮动布局一般，下面来看代码：
点击我看演示效果哦。
2、flex-direction(flex container)属性
这个属性在父元素中定义，作用是改变子元素的布局方向，主要有以下几个属性值：
- row：这个是默认值，定义子元素从左向右布局；
- row-reverse：定义子元素从右向左布局；
- column：定义子元素顺序从上到下布局；
- column：定义子元素反序从上到下布局；
下面贴一部分代码：
更详细戳我看效果啊，具体实现请看demo中的网页源代码。
3、order(flex items)属性
这个属性是定义在子元素中，作用是改变子元素在布局流中的位置。在父元素定义了布局方式为flex时，各个子元素的默认order值为0，当子元素order值设置为负值时向前排序，设置为正值向后排序，设置为0时为正常排序，下面请看代码：
点击这里看效果哦。
4、flex-wrap(flex container)属性
这个属性定义在父元素中，它的作用是设置子元素在页面缩小时，到底是在一行显示还是换行显示，主要有以下几个属性值：
- nowrap：这个是默认值，定义子元素当页面缩小时，还是在一行显示；
- wrap：定义子元素当页面缩小时，换行顺序显示；
- wrap-reverse：定义子元素当页面缩小时，换行反序显示；
下面贴核心代码，默认源代码请到项目源地址或者网页上查看，不说第二次了
.boxThree {
display: flex;
display: -webkit-flex;
flex-wrap: wrap-reverse;
}
点击我查看效果哦
5、flex-flow(flex container)属性
这个属性定义在父元素中，它是flex-direction和flex-wrap这两个属性的缩写版本，但是在这场景下，flex-direction的属性值只能为row或者row-reverse，下面列举3种组合：
- row wrap ：横向顺序布局，页面缩小时换行顺序显示；
- row wrap-reverse：横向顺序布局，页面缩小时换行反序显示；
- row-reverse wrap：横向反序布局，页面缩小时换行顺序显示。
还有几种组合方式，大家可以去尝试一下，在这里不全部举出，下面贴出某一段核心代码：
.boxTwo {
display: flex;
display: -webkit-flex;
flex-flow: row-reverse wrap;
}
点击我查看效果哦
6、justify-content(flex container)属性
这个属性定义在父元素中，它的作用是让子元素以怎样的方式横向布局显示，主要有下面几个属性值：
- flex-start：这个是默认值，让子元素横向布局，方向是从左往右；
- flex-end：让子元素横向布局，方向是从右往左；
- center：让子元素横向居中布局；
- space-between：让子元素横向布局，每个子元素平均分布在父元素；
- spack-around：让子元素横向布局，每个子元素平均分布在父元素，并且在两端会有空间。
下面贴出某一段核心代码：
.boxThree {
display: flex;
display: -webkit-flex;
justify-content: center;
}
点击我查看效果哦
7、align-content(flex container)属性
这个属性定义在父元素中，十分怪异的一个属性，它有以下几个使用的前提：
- 1、需要父元素有高度，并且不能高于几个子元素高度之和；
- 2、需要设置父元素中的子元素为纵向布局(column)；
- 3、需要设置父元素中的子元素能换行显示(wrap)。
属性值与justify-content类似，相比只是多了个stretch。下面贴出某段核心代码：
.boxSix {
display: flex;
display: -webkit-flex;
flex-direction: column;
flex-wrap: wrap;
align-content: stretch;
height: 300px;
width: 800px;
border: 1px solid #ccc;
}
点击我查看效果哦
8、align-items(flex container)属性
这个属性定义在父元素中，是一个十分常用的属性，它的作用是改变子元素纵向布局的方式，主要有以下几个属性值：
- flex-start：让子元素最上、最左布局；
- flex-end：让子元素最底、最左布局；
- center：让子元素垂直居中布局；
- baseline：让子元素根据里面的内容的基线对齐（不理解没关系，请看下方的demo）；
- stretch：这个是默认值，与flex-start值发挥的作用看上去一毛一样，实际上有什么区别我也不太懂。
下面贴出某段核心代码：
.boxFour {
display: flex;
display: -webkit-flex;
align-items: baseline;
height: 300px;
width: 800px;
border: 1px solid brown;
}
点击我查看效果哦
9、align-sef(flex items)属性
这个属性定义在子元素中，它的作用是改变某个子元素在纵轴方向的布局方式，主要有以下几个属性值：
- auto：让某个子元素自动布局，很佛性，一般是跟着周围的子元素布局方式走；
- flex-start：让某个子元素贴着顶部方向布局；
- flex-end：让某个子元素贴着底部方向布局；
- center：让某个子元素垂直居中布局；
- baseline：让某个子元素根据内容基线来布局；
- strech：这个是默认值，和flex-start值发挥的作用看上去一毛一样。
下面贴出某段核心代码：
.item14 {
height: 190px;
font-size: 28px;
align-self: baseline;
}
点击我查看效果哦
10、flex-grow(flex-items)属性
这个属性定义在子元素中，是非常实用的一个属性，它的作用是让子元素以几倍宽度拉伸，属性值的类型为number，下面贴出全部代码：
flex-grow
两倍宽度
四倍宽度
一倍宽度
点击我查看效果哦
11、flex-shrink(flex items)属性
这个属性定义在子元素中，它的作用就是让子元素在页面缩小时宽度如何变化，属性值为number，默认值是1。当值为2时，说明页面缩小时，该子元素将相对缩小两倍；当值为0时，页面缩小时，该子元素宽度不会发生改变。下面请看全部代码：
flex-shrink
flex-shrink
flex-shrink
flex-shrink
点击我查看效果哦
12、flex-basis(flex items)属性
这个属性定义在子元素中，设置弹性盒元素的初始长度，默认值为auto，下面贴代码：
flex-basis
flex-shrink
flex-shrink
flex-shrink
如果把类名为item2的内容换成别的，你们看看会出现什么情况？点击我查看上述代码效果哦
13、flex(flex items)属性
这个属性定义在子元素中，是flex-grow、flex-shrink、flex-basis这三个属性的缩写。默认值为“0 1 auto”，下面请看一段代码：
flex
flex
flex-double
flex
点击我查看效果哦
尾声
终于把flexbox布局的那些玩意探究的差不多了，真的是累，花了近一整天的时间，不过收获却是巨大的，之前对flexbox布局还是迷迷糊糊的，经过这次的总结和探究，算是进一步深入理解了。对flexbox布局的完全掌握我认为还是得经常将它运用在项目之中，多踩踩兼容的坑，同时也能将它熟记于心。
