flex布局的常用属性

目录

1.flex布局的原理

2.flex-direction设置主轴的方向

      1.主轴与侧轴

   2.属性值

        1.row

        2.row-reverse

        3.column

        4.column-reverse

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

     属性值：

        1.flex-start

        2.flex-end

        3.center 

        4.space-around

        5.space-between

        6.space-evenly

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

      1.flex-start

 ​

      2.flex-end

 ​

       3.center

​   

        4.stretch

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

           1.nowrap

           2.wrap

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

        1.flex-star

        2.flex-end

        3.center

        4.space-around

        5.space-between

        6.stretch

         7.space-evenly

7.align-content 和 alignitems区别

8.flex-flow

---

1.flex布局的原理

       flex布局的元素，称为Flex容器（flex container），简称“容器”。

       它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称“项目”。

       开启弹性布局后所有的项目会在同一行显示,项目宽度不足，会自动收缩。

       子容器可以横向排列也可以纵向排列。

        项目也可以开启弹性布局。

  
  
  
  
  



  

    
item
    
item
    
item
    
item
  

        

2.flex-direction设置主轴的方向

      1.主轴与侧轴

               1.默认主轴方向就是x轴方向，水平向右
               2.默认侧轴方向就是y轴方向，水平向下

     

        

   2.属性值

    flex-direction属性决定主轴的方向（即项目的排列方向）
    注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

        1.row

 flex-direction: row;

        2.row-reverse

 flex-direction: row-reverse;

        3.column

 flex-direction: column;

                    

        4.column-reverse

 flex-direction:column-reverse;

                          

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

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

     属性值：

        1.flex-start

 justify-content: flex-start;

        2.flex-end

 justify-content: flex-end;

        3.center 

 justify-content: center;

        4.space-around

 justify-content: space-around;

        5.space-between

 justify-content: space-between;

        6.space-evenly

 justify-content: space-evenly;

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

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

      1.flex-start

 align-items: flex-start;

 

      2.flex-end

 align-items:flex-end;

 

       3.center

 align-items: center;

   

        4.stretch

 align-items: stretch;

 

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

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

           1.nowrap

flex-wrap: nowrap;

           2.wrap

flex-wrap: wrap;

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

        设置子项在侧轴上的排列方式 并且 只能用于子项出现换行的情况（多行），在单行下是没有效果的

        1.flex-star

         

        2.flex-end

         

        3.center

         

        4.space-around

          

        5.space-between

         

        6.stretch

         

         7.space-evenly

          

7.align-content 和 alignitems区别

        1.align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸
        2.align-content适应于换行（多行）的情况下（单行情况无效），可以设置上对齐、下对齐、居中、拉伸、以及平均分配剩余空间等属性值。
        3.总结就是单行找align-items多行找align-content

8.flex-flow

flex-flow属性是flex-direction和flex-wrap属性的复合属性

以上属性都是给容器设置的