css3新属性partB

这一part讲的是css3带来的新的布局方式：

对于页面布局，是我们前端工作者需要注意的一个重点，pc端和移动设备相比，移动设备端的布局方式尤为重要，我们举一个例子

我们先尝试一下不用css3的布局方式解决一下，不逼逼看代码：

我们尝试这用百分比布局把这个布局给布好了，看代码可以得知我们中间部分的高度是页面整体高度的82%。但是数学好的同学可以一眼看出问题，我们现在用的机器型号是iphone5，而iphone5的高度是568，如果我们换成iphone6呢

iphone6的高度是667所以我们的页面下面还是出现了底部白框，算是布局失败了.....
OK，我也不卖关子了，铺垫了这么多，我要开始给大家介绍一个移动端必不可少的布局工具弹性盒模型（flex）
这个工具的主要用法就是，在无法确定机型的情况下，给页面里面的部分模块弹性赋予高度，不逼逼，看代码

我们通过更换各种个样的手机型号，甚至于pad可以看出，中间设置flex=1的那个content标签的高度根据屏幕大小的变化也在变化，这就是弹性布局，神奇么？我们接下来详细介绍一下弹性布局：
1.flex-direction
这个属性决定了主轴的方向，那么问题来了：啥是主轴 还记得我们在代码里面写的一句

这句话的意思是让所有的元素依照从上向下的方向来布局，那么如果理解了主轴，辅轴会更加好理解，就是垂直于主轴的那个方向，如果主轴是从上到下，辅轴就是从左到右

flex-direction需要有四个值
row | row-reverse | column | column-reverse
row：主轴的方向是从左向右
row-reverse：主轴的方向是从右向左
column：主轴的方向是从上到下
column-reverse：主轴的方向是从下到上
我们用代码看一下：

头部和尾部颠倒了

左右颠倒了
那有的同学要说了，如果我想要横着排列4个元素分成两行均匀分布怎么办呢？
这就要用到了flex-wrap 2.flex-wrap

flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
其中flex-direction 属性规定灵活项目的方向，flex-wrap属性规定灵活项目是否拆行或拆列。