Flex 布局

image.png

------------------------- flex container -------------------------

1. flex-flow是flex-direction || flex-wrap的简写

2. flex-direction设置主轴（main axis）的方向

3. flex-wrap设置是否换行

4. justify-content设置flex items在main axis上的对齐方式

5. align-items设置flex items在cross axis的对齐方式（一般是针对单行）

6. align-content设置flex items在cross axis上对齐方式（一般是针对多行）

------------------------- flex items -------------------------

7. flex是flex-grow flex-shrink? || flex-basis的简写

8. flex-grow决定了flex items在main axis方向上如何扩展

9. lex-shrink决定了flex items在main axis方向上如何收缩

10. flex-basis设置flex items在main axis方向上的base size

11. order设置flex items的排布顺序

12. align-self允许flex items覆盖flex container设置的align-items

flex container

        flex-direction
            决定了main axis的方向，有4个取值
            row(默认值)、row-reverse、column、column-reverse
            flex items默认沿着main axis(主轴)从main start开始往main end方向排布

        justify-content
            决定了flex items在main axis上的对齐方式
            flex-start(默认值)：与main start对齐
            flex-end：与main end对齐
            center：居中对齐
            space-between：与main start、main end两端对齐；flex items之间的间距相等
            space-around：与main start、main end之间的距离等于flex items之间的距离的一半；flex items之间的间距相等
            space-evenly：与main start、main end之间的距离等于flex items之间的距离；flex items之间的间距相等

         align-items
            决定了flex items在 cross axis上的对齐方式
            stretch(默认值)：当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex container
            flex-start：与cross start对齐
            flex-end：与cross end对齐
            center：居中对齐
            baseline：与基线对齐

        flex-wrap
            决定flex container是单行还是多行
            nowrap： 单行
            wrap：多行
            wrap-reverse：多行（对比wrap，cross start与cross end相反）

        flex-flow:
            flex-direction || flex-wrap的简写 

        align-content:
            决定了多行flex items在cross axis上的对齐方式，用法与justify-content类似
            stretch(默认值)：与align-items的stretch类似
            flex-start：与cross start对齐
            flex-end：与cross end对齐
            center：居中对齐
            space-between：
            space-around：
            space-evenly：

flex items

        align-self
        
        order

        flex-grow
            决定了flex items如何扩展
            可以设置任意非负数字（正小数、正整数、0），默认值是0
            当flex container在main axis方向上有剩余size时，flex-grow属性才会有效
            1.如果所有flex items的flex grow总和sum超过1， 每个flex item扩展的size为 flex container的剩余size * flex-grow / sum
            2.如果所有flex items的flex grow总和sum不超过1，每个flex item扩展的size为 flex container的剩余size * flex-grow
            3.flex items扩展的最终size不超过max-width\max-height

        flex-shrink:
            决定了flex items如何收缩
            可以设置任意非负数字（正小数、正整数、0），默认值是1
            当flex items在main axis方向上超过了flex container，flex-shrink属性才会有效
            
            每个flex item收缩的size为
            flex items超出flex container的size * 收缩比例 / 所有flex items的收缩比例之和
            收缩比例 = flex-shrink * flex item的base size
            base size就是flex item放入flex container之前的size

            flex items收缩的最终size不超过min-width\min-height

        flex-basis
            设置flex items在main axis方向上的base size
            auto（默认值）、content：取决于内容本身的size
            决定flex items最终base size的因素，从优先级高到底
            1. max- 、min-
            2. flex-basis
            3. width/height
            4. 内容本身的size

        flex
            是flex-grow flex-shrink? || flex-basis的简写
            ? : 可有可无
            默认值是 0 1 auto
            none：0 0 auto