css3Flex布局（一）

Flex弹性盒子是一种新的布局模式。

为了有条理并且方便理解，下面我将Flex布局分成两大部分说明：

首先需要明白一个点就是如果想要使用Flex布局要在父元素中使用display：flex

语法：

div{ display: flex}

（一）给父级元素添加Flex属性

1.flex-direction 设置主轴的方向，主轴默认的方向是x轴方向，水平向右 

方法：

（1）row 是默认属性，默认的主轴是x轴 ；元素跟着主轴来排列

语法：

flex-direction:row

(2)row-reverse是从右往左排列 

语法： 

flex-direction:row-reverse

（3）column 是设置元素从上到下排列

语法：

 flex-direction:column

（4）column-reverse是设置元素从下到上排列也就是逆向排列

语法：

  flex-direction:column-reverse

2.justify-content 用来设置主轴上的元素的排列方式

方法：

（1）flex-start 默认值从头部开始，如果主轴是x轴则从做到右

语法：

justify-content：flex-start

（2）flex-end  从尾部开始排列

语法:

 justify-content：flex-end

(3)center  在主轴居中对齐(如果主轴是x轴则水平居中)

语法：

 justify-content：center

 (4)space-around    平分剩余空间

语法：

justify-content：space-around 

（5）space-between   先两边贴边再平分剩余空间(重要)，小米商城的页面的某些部分的布局也使用到了这个属性，所以请重视该属性

语法：

justify-content：space-between

 3.flex-warp   设置子元素是否需要换行，默认不换行

(1)nowarp  默认设置，不换行

语法：

flex-warp:nowarp 

(2) warp 换行

语法：

flex-warp:warp 

剩下的部分将在第二部分发布，请耐心等待，也可私信催更