Flex布局 父项常见属性以及子项常见属性

flex伸缩布局的原理

      通过给父盒子添加flex属性，达到控制子盒子位置和排列方式的目的；所以我们将flex的布局属性分为两部分：父项常见属性和子项常见属性；大部分属性在父盒子上设置达到控制子盒子的目的，但部分属性也需要在子盒子上设置。

flex伸缩布局的特点

1. 父盒子设置flex布局后，子元素将不区分行内元素和块元素，此时所有子元素均可以设置宽高；
2. 自适应缩放，子元素设置flex属性后，可根据可视窗口自适应缩放；
3. 任何元素均可指定flex布局，可以理解为父盒子对子元素“一视同仁”；
4. 不需要清除浮动，因为此时float、clear、vertical-align等属性失效；

布局父项常见属性

1. flex-direction：设置主轴的方向

   默认：主轴（水平向右） 侧轴（水平向下） 当设置一方为主轴时，另一方则为侧轴；
   注意：使用属性带有reverse时，子元素顺序也会发生变化。
   
   相关属性如下：
   
   举例说明：
   flex-direction：row;(默认)    排序如下图所示：
     
   flex-direction：row-reverse;    排序如下图所示：
     
      flex-direction: column; 排序如下图所示：
   
      flex-direction: column-reverse; 排序如下图所示：
   

2. justify-content：设置主轴上的子元素排列方式（设置主轴居中）

   属性如下图所示：
  
      举例说明：当x轴是主轴时，紫色部分为多余部分：

      justify-content: flex-start; 排序如下图所示：

      justify-content: flex-end ;排序如下图所示：

      justify-content: center;排序如下图所示：
  

      justify-content: space-around;排序如下图所示：

      justify-content: space-between;排序如下图所示：

  

3. flex-wrap：设置子元素时候换行

   flex-wrap:nowrap; 默认不换行

    flex-wrap:wrap; 换行

4. align-content：设置侧轴上的子元素排列方式（多行 出现换行）
   

5. align-items：设置侧轴上的子元素排列方式（单行使用）（设置侧轴居中）
   
       align-items: flex-start;
   
       align-items: flex-end;
       
       align-items: center;
   
       align-items: stretch; 注意父盒子有高度无法拉伸
   

布局子项常见属性

1.flex 子项目占的份数，分配剩余空间；

这里左右两个盒子宽度固定，中间部分为剩余空间，设置属性为：flex：1；即可占满整个空间；如下图：

中间两个盒子均设为flex：1；即可平分剩下空间；

第一个中间盒子设为flex:3；第二个盒子设为flex：1；即可达到3:1的分法；

2.align-self 控制子项目自己在侧轴的排列方式
覆盖align-items 默认auto（继承align-items） 属性值与上align-items相同；
3.order属性定义子项的排列顺序（前后顺序） 数字越小，排列靠前，默认为0

设置参数如下代码所示，我们可以通过设置此属性达到想要的排序；

       div:nth-child(1){
     order: 3;}
       div:nth-child(2){
     order: 1;}
       div:nth-child(3){
     order: 0;}
       div:nth-child(4){
     order: 2;}