HTML5的弹性盒子使用总结

Posted 2021-09-03 请问下神奇海螺

弹性盒属性有很多 并且难记 分为两类

    - 可以添加在父级元素上属性 => 控制所有的子级元素
    - 可以添加在子级元素上属性 => 控制单个元素

添加在父级元素上的属性

**1.弹性盒默认主轴是X轴,改变主轴方向**
    属性:flex-direction
    属性值
        - row 默认值 默认是X轴
        - column 默认主轴是Y轴 列
        - row/column-reverse 默认主轴依然是X/Y轴 排列的顺序是颠倒的

**2.主轴的对齐方式(控制子级元素在主轴上的显示对齐方式)**
    属性:justify-content:
    属性值
        - flex-start  开始位置
        - flex-end    结束位置
        - center      居中
        - space-between 两端对齐 其他的空间自动分配
        - space-around  所有的空间都是自动分配的
        - space-evenly  搜有的空间都是相等的

3.侧轴的对齐方式

    属性:align-items
    属性值
        - flex-start
        - flex-end
        - center
        - baseline 基线对齐
            - 默认情况下和flex-start效果是一样的
            - 当设置文本字体大小的时候 所有的文本都会以基线对齐
        - stretch  拉伸

4.弹性盒中子级元素的总宽度大于父级的时候 默认是进行挤压的 不会往下掉

    换行属性:flex-wrap
    属性值
        - wrap 换行
        - nowrap 不换行
        - wrap-reserve 换行顺序反向

5.行与行之间的间距

    属性:align-content
    属性值
        - flex-start 开始位置
        - flex-end   结束位置
        - center     居中
        - space-between 两端对齐 其他的空间自动分配
        - space-around  所有的空间都是自动分配的
        - space-evenly  所有的空间都是相等的