flex 容器属性详细介绍

1.  flex-direction  定义子项目怎样排列，定义主轴方向

2.  justify-content  子项目整体在主轴方向的对齐

3.  align-items  定义子项目整体在主轴垂直方向的对齐

4.  align-content  定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

5.  flex-wrap 设置当项目在容器中一行无法显示的时候如何处理。（是否换行）

6.  flex-flow  flex-deriction和flex-wrap属性的简写，默认值为[row nowrap]

---

1. flex-direction ：row  |  row-reverse  |  column  |  column-reverse

    含义：定义容器要在哪个方向上堆叠 flex 子项目。

flex-direction:row;                                               flex-direction:row-reverse;

水平方向从左到右                                                水平方向从右到左

                       

flex-direction:column;                                    flex-direction:column-reverse;

垂直方向从上到下                                          垂直方向下到上             

                        ​​​​​​​        ​​​​​​​        ​​​​​​​      ​​​​​​​          

---

 

2. justify-content ：center | flex-start |  flex-end | space-around | space-between

   含义：用于子项目整体在 flex 父容器中主轴方向的对齐

justify-content: center ;

主轴居中

 justify-content: flex-start ;                                 justify-content:flex-end ;

主轴开头位置                                                      主轴末端对齐

                    

  justify-content: space-around ;                       justify-content: space-between ; 

  主轴各子项目周围带空格隔开                          主轴各子项目之间带空格隔开

                        

---

3. align-items:flex-start | flex-end | center | baseline | stretch含义：定义了项目在交叉轴上是如何对齐显示的

align-items:flex-start;                                        align-items:flex-end；

交叉轴开始位置                                                  交叉轴末尾位置

          ​​​​​​​        

align-items:center ​​​​​​​;                                             align-items:baseline;  

交叉轴中间                                                           第一行文字的基线对齐  ？？？？？

 align-items:stretch​​​​​​​ ​​​​​​​;

（默认值）：如果子元素未设置高度或设为auto，将占满交叉轴整个容器的高度。

---

 

4. align-content: flex-start | flex-end | center | space-between | space-around | stretch

含义：定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

align-content: flex-start;        与交叉轴的起点对齐。                                   

                                         

 align-content: flex-end;        与交叉轴的终点对齐

 align-content: center;        与交叉轴的中点对齐

 align-content: space-between;        在交叉轴中的子项目之间空格隔开

 align-content: space-around;        在交叉轴中的子项目周围空格隔开

---

5. flex-wrap:nowrap | wrap | wrap-reverse

含义：设置当项目在容器中一行无法显示的时候如何处理。

 flex-wrap:​​​​​​​wrap;                                                      flex-wrap:nowrap; 

正常换行                                                                  表示不换行

                                   

 

 flex-wrap:wrap-reverse; 

 反方向换行

                         

---

6. flex-flow: flex-deriction属性值 flex-wrap属性值

flex-flow：row nowrap；

flex-flow：row wrap；

flex-flow：row wrap-reverse；

flex-flow：column nowrap；

flex-flow：column wrap；

flex-flow：column wrap-reverse；