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属性规定灵活项目是否拆行或拆列。