【CSS笔记】CSS弹性盒及CSS多列知识总结

弹性盒【控制子元素在父元素中的位置】：
    display： flex /inline-flex

    特点：
        1】在弹性盒内部，所有元素都是按照主轴排列的（可以从上往下排，也可以从左往右排）
        2】在弹性盒内部的所有元素，都会默认转成块状元素，可以直接添加宽高
        3】弹性盒只能影响它的子元素，不能影响孙元素

    让父元素形成弹性盒【display:flex;】：
        【给父元素加的属性】
            1、改变主轴方向    flex-direction：
                    row：从左往右（默认值）
                    column：从上往下
                    row-reverse：从右往左
                    column-reverse：从下往上
            2、改变主轴排列方式    justify-content:
                    flex-start：主轴的顶端对齐（默认值）
                    flex-end：主轴的末端对齐
                    center：主轴的中间对齐
                    space-around：平分主轴的剩余空间，最两边的距离是中间的一半
                    space-between：平分主轴的剩余空间，最两边为0
                    space-evenly：完全平分主轴的剩余空间
            3、改变侧轴（交叉轴；和主轴垂直的那个轴）的排列方式    align-items：
                    flex-start：侧轴的顶端对齐
                    center：侧轴的中间对齐
                    flex-end：侧轴的末端对齐
                    baseline：效果类似于顶端对齐
                    stretch：如果侧轴对应的长度不写，默认拉伸，与父元素侧轴长度相同（默认值）
            4、子元素是否换行    flex-wrap：
                    nowrap：不换行（默认值）
                    wrap：换行
                    wrap-reverse：换行，改变侧轴方向
            5、行与行之间的排列顺序    align-content：
                    flex-start：侧轴的顶端对齐
                    flex-end：侧轴的末端对齐
                    center：侧轴的中间对齐
                    space-around：平分主轴的剩余空间，最两边的距离是中间的一半
                    space-between：平分主轴的剩余空间，最两边为0
                    space-evenly：完全平分主轴的剩余空间

        【给子元素加的属性】
            1、order：整数
                改编自元素的排列顺序，数值越大越靠后，可以是负数，默认值是0
            2、align-self：
                flex-start：侧轴的顶端对齐
                center：侧轴的中间对齐
                flex-end：侧轴的末端对齐
                baseline：效果类似于顶端对齐
                stretch：如果侧轴对应的长度不写，默认拉伸，与父元素侧轴长度相同
            3、flex-grow：
                分配主轴的剩余空间（子元素的放大比例），后跟自然数，默认值是0
                例：flex-grow：2;
            4、flex-shrink：
                子元素的缩小比例，0：不进行压缩，依旧不会换行；1：进行压缩（默认值）
            5、flex-basis：
                在分配剩余空间之前，占据的空间；auto（默认值）
            6、flex：
                flex-grow(必填)  flex-shrink(选填)  flex-basis(选填)
                flex：0 1 auto（默认值）；
                很多时候用flex取代flex-grow

CSS多列：
    1、column-count 
        说明： 属性规定元素应该被分隔的列数 适用于：除table外的非替换块级元素, table-cells, inline-block元素

    2、column-gap 
        说明： 属性规定列之间的间隔大小
        默认是文字大小

    3、column-rule 
        说明： 设置或检索对象的列与列之间的边框。复合属性。 column-rule-color规定列之间规则的颜色。 column-rule-style规定列之间规则的样式。 column-rule-width规定列之间规则的宽度。

    4、column-fill 
        说明： 设置或检索对象所有列的高度是否统一 auto：列高度自适应内容 balance：所有列的高度以其中最高的一列统一
        默认是balance

    5、column-span 
        说明： 设置或检索对象元素是否横跨所有列。 none：不跨列 all：横跨所有列

    6、column-width 
        说明： 设置或检索对象每列的宽度