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布局，项目是跟着主轴来排列的 
 

<style>
    div{
        flex-direction: row;/*默认的主轴是x轴(行),则y轴为侧轴*/​​​​​​​  
        flex-direction: row-reverse; /*设置主轴（x轴）上的元素左右反转*/

        flex-direction: column;/*给主轴设置为y轴，则x为侧轴 */
        flex-direction: column-reverse;/*y主轴上的元素上下反转 */
    }
</style>

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

<style>
    div{
        display:flex;
            /*默认属性，从主轴的头部开始排，如果主轴是x，则是从左到右*/
          justify-concent：flex-start;
            /*让盒子从主轴尾部开始排列*/
	      justify-concent：flex-end;
            /*让盒子居中排列*/
	      justify-concent：center;
            /*让子盒子平分主轴上的剩余空间*/
	      justify-concent：space-around;
            /*子盒子在主轴上先两边贴边，再平分剩余空间 */
	      justify-concent：space-between；
    }
</style>

1.3：设置子元素是否换行

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

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

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

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

<style>
    div{
        display:flex;
        align-items：center;//侧轴居中
        align-items：flex-start;//从侧轴的头部开始排
        align-items：end;//让盒子从主轴尾部开始排列
    }
</style>

 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小所以在最前面