css中的flex布局使用原理

flex布局原理

• 当为父盒子设为flex布局以后，子元素的float，clear和vertical-align属性将失效
• 伸缩布局 = 弹性布局 = 伸缩布局 = 弹性盒布局 = flex布局

---

常见父项属性

以下由6个属性是对父元素设置的

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

   • 主轴与侧轴

     在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列，x轴和y轴

     默认主轴方向就是x轴方向，水平向右

     默认侧轴方向就是y轴方向，水平向下

   • 属性值

     flex-direction属性决定主轴的放心（即项目的排列方向）

     注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下额就是侧轴。而我们的子元素是跟着主轴来排列的

     属性值	说明
     row	默认值从左到右
     row-reverse	从右到左
     column	从上到下
     column-reverse	从下到上

     //父元素中控制哪个轴排列
     div{
     	display：flex；
     	//flex-direction: row;
     	//flex-direction: column;
     }
     

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

   justify-content属性定义了项目在主轴上的对齐方式

   注意：使用这个属性之前一定要确定好主轴是哪个

   属性值	说明
   flex-start	默认值从头部开始，如果主轴是x轴，则从左到右
   flex-end	从尾部开始排列
   center	在主轴居中对齐（如果主轴是x轴则水平居中）
   space-around	平分剩余空间
   space-between	先两边贴边，再平分剩余空间（重要）

3. flex-wrap：设置子元素是否换行

   默认情况下，项目都排在一条线（又称轴线）上，flex-wrap属性定义，flex布局中默认是不换行的。

   属性值	说明
   nowrap	默认值，不换行。
   wrap	换行

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

   该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单向的时候使用。

   注意：主轴与侧轴的概念要区分清楚

   属性值	说明
   flex-start	默认值，从上到下
   flex-end	从下到上
   center	挤在一起居中（垂直居中）
   stretch	拉伸

5. align-items：设置侧轴上的子元素排列方式（单行）

   该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单向的时候使用

   属性值	说明
   flex-start	默认值从上到下
   flex-end	从下到上
   center	挤在一起居中（垂直居中）
   stretch	拉伸

   align-content和align-item区别

   • align-items使用与单行情况下，只有上对齐，下对齐，居中和拉伸

   • align-content适应于换行（多行）的情况下（单行情况下无效），可以设置上对齐，下对齐，居中，拉伸及平均分配剩余空间等属性值。

   • 总结就是

     单行找align-item

     多行找align-content

6. flex-flow：复合属性，相当于同时设置了flex-deirection和flex-wrap

   flex-flow属性是flex-deitection和flex-wrap属性的符合属性。

   flex-flow:row wrap;
   

---

总结：

• flex-direction:设置主轴的方向
• justify-content:设置主轴上的子元素排列方式
• flex-wrap:设置子元素是否换行
• align-content:设置侧轴上的子元素的排列方式（多行）
• align-items:设置侧轴上的子元素排列方式（单行）
• flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap

---

---

flex布局子项常见属性

• flex子项目占的份数

  flex属性定义子项目分配剩余空间，用flex来表示占多少份数

  .item{
      flex:<number>;	//默认是0
  }
  

• align-self控制子项自己在侧轴的排列方式

  align-self属性允许单个醒目有与其他项目不一样的对齐方式，可覆盖align-items属性

  默认为auto，表示聚成父元素的align-items属性，如果没有父元素，则等于stretch。

  span:nth-child(2){
      /*设置自己在侧轴上的排列方式*/
      align-self:flex-end;
  }
  

• order属性定义子项的排列顺序（前后顺序）

  数值越小，排列越靠前，默认为0

  注意：和z-index不一样。

  div span:nth-child(2){
      //默认是0，-1比0小，所以在前面
      order:-1;
  }