大家好 我是逆战班的学员 来做个知识点的总结: flex布局

                flex布局

Flex弹性布局元素，主要分为两种：

1>语法添加到父容器上（display:flex）

2>语法添加到子容器上

 

1.添加到父容器上的语法

      (1) display:flex

       (2) flex-direction::(row:布局的排列方向)主轴排列方向

              值：row(默认值) 显示为行，方向为当前文档水平流方向，默认从左往右。

                     row-reverse:显示为行，方向和row属性相反

                     column：显示为列

                    colum-reverse：显示为列，属性和column属性相反

     (3)flex-wrap:用来控制弹性盒是否进行换行处理

              值：no-wrap：（默认）不换行

                     wrap：换行处理

                     wrap-reverse：（折行的反向操作）反向换行

    (4) flex-flow:是flex-direction和flex-warp的复合写法，第一个值表示方向，第二个是换行

     (5)justify-content:决定了主轴方向上子项的对齐和分布方式

              值：flex-start：（默认值）表现为子项都去起始位置对齐

                     flex-end:子项都去结束位置对齐

                    center：子项都去中心位置对齐

                    space-between：表现为两端对齐，between是中间的意思，意思是多余的空白间距只是元素中间分配区域。

                    space-around：意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半

                    space-evenly:每个flex子项两侧空白间距完全相等。

    (6)align-items: 指的是flex所有每一行中的子元素上下对齐方式。

              值：stretch:（默认）flex子项拉伸

                     flex-start：表现为容器子项顶对齐

                     center：表现为中心对齐

                      flex-end：表现为底部对齐

    (7) align-content : 跟justify-content相反的操作。侧轴的对齐方式。(最少需要两行才能看出效果，因为他是多行的一个上下对齐方式)

            值：stretch:（默认）每一行子元素都等比拉伸

                    space-around：每一行元素上下都享有独立不重叠的空白空间

                    space-evenly:每一行元素都上下等分

                    flex-start：表现为起始位置对齐

                   flex-end:表现为结束位置对齐

                   center：表现为中心位置对齐

                   space-between：表现为两端对齐，

 

2.作用在flex子项上的css属性

       （1）order：所有flex子项order默认值为0（排序）

       （2）flex-grow: 扩展 ( 想看到扩展的效果，必须有空隙 )

                 值：0 : 默认值 , 不去扩展

                       1 : 去扩展 , 会把空白区域全部占满

             （子元素会按照设置的比例值来分配空隙，如果比例值总和小于1，那么会有空隙，如果比例值总和大于等于1，那么就没有空隙。）

       （3）flex-shrink : 收缩

                 值：1（默认值）表示收缩

                         0表示不收缩，.5收缩小一些，2收缩大一些。（大小是跟正常缩放1进行比较的）

    （4）flex-basis：跟flex-shrink/flex-grow很像。

            flex-shrink/flex-grow是设置一个比例值，flex-basis是设置一个具体值。

   （5）flex : 一种复合写法

            flex-grow  flex-shrink  flex-basis

                flex:1;

                    flex : 1 1 0   

                flex:0;

                    flex : 0 1 0

  （6）algin-self:：控制单独某一个子项的垂直对齐方式

             值：stretch:（默认）flex某一个子项拉伸

                    flex-start：表现为顶对齐

                   center：表现为中心对齐

                   flex-end：表现为底部对齐

  注意点：

       1>：默认情况下，在弹性盒子中的子元素的左右排列的。

       2>水平是主轴的时候：默认情况下，当宽高不写的时候，宽度由内容决定，高度由父容器决定。

      3>垂直是主轴的时候：默认情况下，当宽高不写的时候，宽度由父容器决定，高度由内容决定。

      4>当子项的总宽度大于父容器的时候，会自动收缩的（弹性的优先级是大于自身固定大小的）

      5>当子项的内容已经达到了父容器最小宽高的时候，就会出现溢出的现象。