flex学习

flex布局原理

• flex布局意为弹性布局,用来为盒模型提供最大的灵活性,任何容器都可以指定为flex布局
• 注意:
  1. 当我们为负盒子设置为flex布局以后,子元素的float,clear,vertical-align 属 性都将失效

常见的父属性

1. flex-direction

• flex布局中分为主轴和侧轴(x轴y轴)

• flex-direction 设置主轴的方向

• 默认主轴方向为x轴,水平向右
• 默认侧轴方向是y轴,水平向下

---

    .box {
        flex-direction: row | row-reverse | column | column-reverse;
     }

其中属性值有以下: 默认为主轴x轴(row) 设置一个为主轴另外一个就是y轴

2. justify-content

• justify-content 设置主轴上子元素的排列方式(使用之前一定要确定好主轴是哪一个)

    .box {
        justify-content: flex-start | flex-end | center | space-between | space-around;
      }
  

3. flex-warp

• flex-warp 设置子元素是否换行

  ---

      .box{
         flex-wrap: nowrap | wrap | wrap-reverse;
       }
  
  

• 默认情况下,项目都是排在一条线上的,flex-warp属性定义,flex布局中默认是不换行的

4. align-items

• align-items 设置侧轴上的子元素的排列方式(单行)

  ---

  • 该属性是控制子项在侧轴(默认是y轴)上排列方式 在子项为单项的时候使用(stretch设置需要子容器没有设置高度)

5. algin-content

• algin-content 设置侧轴上的子元素的排列方式(多行才有效果)

  ---

   .box {
   justify-content: flex-start | flex-end | center | space-between | space-around;
   }
  

  • 设置子项在侧轴上的排列方式 并且只能用于子项的换行的情况(多行) 在单行下是没有效果的

6. flex-flow

• flex-flow 复合属性,相当于同时设置了flex-direction和flex-warp

  例如

  
           flex-flow: <flex-direction> || <flex-wrap>;
            flex-flow:row warp
  
  

7.flex属性

• flex属性定义子项目分配剩余空间,用flex表示占有多少分数

        .item {
              flex:<number> 默认为0
          } 
  

8. algi-self

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