flex弹性布局常用属性

1，flex是一维布局，开启flex布局后，里面所有的元素将被称作item（项目）

1，当给父盒子设为弹性布局后，子元素float，clear和vercital-align属性将失效

3，主要通过给父盒子添加flex属性，来控制子盒子（item）的位置和排列方式。

---

1.设置在父盒子的常用属性

        1.1:设置主轴方向

        1.2：设置主轴上子元素的排列方式

        1.3：设置子元素是否换行

        1.4：设置侧轴上子元素排列方式（用于单行）

        1.5：设置侧轴子元素排列（用于多行子元素时）

2，子项常用属性

        2.1：定义子项目分配剩余空间

        2.2：控制子项自己在侧轴的排列方式

        2.3：order定义盒子的排列顺序

---

1.1设置主轴方向

  注： 给父盒子样式添加：display: flex;将开启flex布局，项目是跟着主轴来排列的 
 

1.2：设置主轴上子元素的排列方式

1.3：设置子元素是否换行

 ①：flex-nowrap;默认属性，使用display-flex后子元素都排在主轴一条线上，不换行，如果装不开会缩小子盒子的大小。

②：flex-wrap；使用后盒子在主轴排不开时，换另一行显示

③：合写：flex-flow：row wrap；设置主轴，并且换行

1.4：设置侧轴上子元素排列方式（用于单行）

 1.5：设置侧轴子元素排列（用于多行子元素时）

align-concent：center;//多行居中
align-concent：space-between;//子元素贴在侧轴两边

---

2.1：定义子项目分配剩余空间

flex:1;//表示分一份全占
flex:20%;//还可以用百分比表示

 2.2：控制子项自己在侧轴的排列方式

控制子项自己在侧轴的排列方式：align-self：flex-end；

  2.3：order定义盒子的排列顺序

order定义盒子的排列顺序    ：order：-1；默认0，-1比0小所以在最前面