CSS之Flex布局：认识flexbox

Flexbox：弹性盒子

        1.弹性盒子是一种用于按行或按列布局元素的一维布局方法

·        2.元素可以膨胀以填充额外的空间，收缩以适应更小的空间

         3.通常我们使用Flexbox来进行布局的方案称之为flex布局（flex layout）

flex布局的重要概念

        两个重要概念

                1.开启了flex布局的元素交flex container

                2.flex container里面的中介子元素叫做flex item

                

        当flex container中的子元素变成了flex item时，具备以下特点：

                1.flex item 的布局将受flex container属性的设置来进行控制和布局

                2.flex item 不再严格区分块级元素和行内级元素

                3.flex item默认情况下是包裹内容的，但是可以设置宽度和高度

        设置display属性为flex或者inline-flex可以成为flex container

                1.flex：flex container以block-level形式存在

                2.inline-flex：flex container以inline-level形式存在

flex布局的模型

         main size：水平主轴

        main start：主轴开始位置

        main end：主轴结束位置

        cross size：垂直交叉轴

        cross start：交叉轴的开始位置

        cross end：交叉轴的结束位置

项目默认沿主轴排列，单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

flex的相关属性

        应用在flex container 上的css属性

        1.flex-flow                                                       （是flex-direction与flex-wrap的简写）

        2.flex-direction                                                  (主轴上的排列方式)

        3.flex-wrap                                                      （决定flex container 是单行还是多行）

        4.justify-content                                              （主轴上的对齐方式）

        5.align-items                                                   （决定items在垂直交叉轴上的对齐方式）

        6.align-content                               （决定了多行flex items在垂直交叉轴上的对齐方式）

        

        应用在flex items上的css属性

        1.flex-grow                                                                            (决定了flex item 如何扩展)

        2.flex-basis                                     （定义在分配多余空间之前，项目占据的主轴空间）

        3.flex-shrink                                                                                      （项目的缩小比例）

        4.order                                                                               （决定flex items的排列顺序）

        5.align-self                                                          (覆盖flex container 设置的align-items)

        6.flex                                                         （flex grow ||  flex shink || flex basis 的简写）

flex-direction 

        flex items 默认值都是沿着main axis(主轴)从main start 开始往 main end 方向排布

                1.flex-direction 决定了main axis的方向，有4个取值

                2.row(默认值)、row-reverse、column、column-reverse

flex-wrap 

        1.nowrap(默认)：单行

        2.wrap:多行

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

flex-flow

        该属性是flex-direction和flex-wrap的简写

                顺序任何，并且都可以省略

  flex-flow: row-reverse wrap-reverse;
        

 justify-content

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

flex-start(默认值):与 main start对齐

flex-end:与main end对其

center:居中对齐

space-between：

        flex items之前的距离相等

        与main start、main end两端对齐

space-around：

        flex item之间的距离相等

        flex items与main start、main end之间的距离是flex items之间距离的一半

space-evenly:

        flex items之间的距离相等

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

align-item 

        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 

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

                stretch（默认值）：与align-items的stretch类似

                flex-start：与corss对齐

                flex-end:与cross end对齐

                center:居中对齐

                space-between:

                        flex items之间的距离相等

                         与cross start、cross end两端对齐

                space-around:

                        flex items之间的距离相等

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

                space-evenly：

                        flex items 之间的距离相等

                        flex items与cross start、cross end之间的距离等于flex items之间的距离

 flex item 属性——order

        order决定了 flex items的排布顺序

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

                默认值是0

 flex item 属性——align-self

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

                auto(默认值)：遵从flex container的align-items设置

                stretch、flex-start、flex-en、center、baseline，效果跟align-items一致

 flex item 属性——flex-grow

        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-item属性-flex-shrink

        flex-shrink决定了flex items如何收缩（缩小）

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

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

          如果所有flex items的flex-shrink总和sum超过1，每个flex item收缩的size为

                flex items超出flex container的size*收缩比例/所有flex items的收缩比例之和

 flex-item属性-flex-basis

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

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

flex-item属性 -flex属性

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

                none | <flex-grow> <flex-shrink> <flex-basis> | auto

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

                一个无单位数：它会被当做flex-grow的值

                一个有效的宽度(width):它会被当做flex-basis的值

                关键字none,auto或initial                 

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

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

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

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

        三值语法：

                第一个值必须为一个无单位数，并且它会被当做flex-grow的值

                第二个值必须为一个无单位数，并且他会被当做flex-shrink的值

                第三个值必须为一个有效的宽度值，并且它会被当做一个flex-basis的值