flex布局

开启flex布局

Flex:块级元素

Inline-flex：行内元素

应用在flex container 上的css属性

Flex-flow 是flex-direction||flex-wrap的简写

         可以省略，顺序任意

Flex-direction :  决定主轴的对齐方式

row（从左到右）row-reverse(右到左)  column(从上到下) column(下到上)

Flex-wrap: 决定了 flex container 是单行还是多行(默认情况下，所有的flex items 都会在同一行显示)

          Nowrap(默认)：单行

          Wrap：多行

          Wrap-reverse:多行（对比wrap,cross start 与 cross end 相反）

Justify-content: 决定了flex items 在main axis 上的对齐方式

              Flex-start(默认) 与main start 对齐

              Flex-end:与main end 对齐

              Center: 居中对齐

              Space-between:

                    Flex items 之间的距离相等

                    与main start , main end两端对齐

              Space-evenly:

                    Flex items 之间的距离对齐

                    Felx items与main start , main end 之间的距离 等于 flex items之间距离

              Apace-around:

                    Flex items 之间的距离相等

                    Felx items与main start , main end 之间的距离 等于 flex items之间距离的一半

Align-items：决定了flex items 在cross axis 上的对齐方式

                       Normal:在弹性布局中，效果和stretch一样

                 Stretch:当flex items 在 cross axis 方向的size为auto 时，会自动拉伸至填充flex container（前提是没有设置高度）

                         Flex-start:与cross start 对齐

                          Flex-end:与cross end 对齐

                          Center: 居中对齐

                          Baseline:与基准线对齐

Align-content：决定了多行flex items 在cross axis 上的对齐方式，用法与justify-content类似

                        Stretch(默认值):与align-items的stretch类似

                         Flex-start:与cross start对齐

                          Felx-end:与cross end 对齐

                          Center:居中对齐

              Space-between:

                            Felx items：之间的距离相等

                            与cross start、cross end两端对齐

              Space-around:

                           Felx items：之间的距离相等

                           Flex items：与cross start、cross end 之间的距离是 flex items之间距离的一半

              Space-evenly:

                          Felx items：之间的距离相等

                          Flex items：与cross start、cross end 之间的距离是 flex items之间距离

应用在flex items 上的css属性

Flex

Flex-grow：决定了flex items 如何扩展

                   可以设置任意非负数字（正小数、正整数、0）。默认值是0

                   当flex container在main axis方向上有剩余size时，flex-grow属性才会有效

如果所有flex items的flex-grow总和sum超过1，每个flex item 扩展的size为flex container的剩余size*flex-grow/sum

如果所有flex items的flex-grow总和sum不超过1，每个flex item 扩展的size为flex container的剩余size*flex-grow-grow

Flex-basis : 用来设置flex items在main axis 方向上的base size

                   Auto（默认值）、具体的宽度数值（100px）

                    决定flex items 最终base size 的因素，从优先级高到低

                    1、Max-width\max-height\min-width\min-height

                    2、Flex-basis

                    3、Width\height

                    4、内容本身的size

Flex-shrink：决定了flex items 如何收缩

                     可以设置任意非负数字（正小数、正整数、0）。默认值是0

                     当flex container在main axis方向上超过flex container，flex-shrink属性才会有效

                     如果所有flex items的flex-shrink总和sum超过1，每个flex item 收缩的size为flex items超出flex container 的size*收缩比例/所有flex items的收缩比例之和

如果所有flex items的flex-shrink总和sum不超过1，每个flex item 扩展的size为flex items 超出 flex container 的size*sum*收缩比例/所有flex items的收缩比例之和

收缩比例=flex-shrink*flex item 的base size

Base size 就是flex item 放入flex container之前的size

Flex items收缩后最终size不能小于min-width\min-height

Order： 决定了flex items 的排布顺序

              可以设置任意整数（正整数、负整数、0），值越小就排在越前面

              默认值值是0

Align-self：flex items 可以通过align-self覆盖flex container 设置的align-items

                   Auto(默认值):遵循flex container 的 aligin-items设置

                   Stretch、flex-start、flex-end、center、baseline，效果跟align-items一致

Flex : 是flex-grow||flex-shrink||flex-basis的简写。Flex属性可以指定1个，2个或3个值。

      单值语法：值必须为以下其中之一

      一个无单位（<number>）:它会被当作<flex-grow>的值

      一个有效的宽度（width）值:它会被当作<flex-basis>的值

      关键字none,auto或initial

      双值语法：第一个值必须为一个无单位数，并且它会被当作<flex-grow>的值

                       第二个值必须为以下之一：

                               一个无单位数：它会被当作<flex-shrink>的值

                               一个有效的宽度值：它会被当作<flex-basis>的值

      三值语法：第一个值必须为一个无单位数，并且它会被当作<flex-grow>的值

                       第二个值必须为一个无单位数：并且它会被当作<flex-shrink>的值

                       弟三个值必须为一个有效的宽度值：它会被当作<flex-basis>的值