15 多列、盒子模型、弹性盒子

1.1  多列

• 1.列数：column-count 写好了列数列宽会自动分配

• 2.列宽：column-width 写好了列宽列数会自动分配

• 3.column-gap：列间距

• 4画列线

  • 单一写法

    • 列线宽度：column-rule-width

    • 列线样式：column-rule-style

    • 列线的颜色：column-rule-color

  • 复合写法：column-rule

• 5.列填充（列高度）：column-fill

  • balance：让每一列的高度都是一致的，默认值

  • auto：让每一列的高度都填充满盒子

• 6.标题的跨列：column-span：all

• 7.不断层：break-inside:avoid

1.2  盒子模型

• 7.不断层：break-inside:avoid

• 标准（w3c）:box-sizing:content-box

  • 自己写的width和height是内容区域的宽和高

  • 加了内间距和边框线会把盒子撑大

  • 总宽：width+左右padding+左右border

• 怪异(IE):box-sizing:border-box

  • 自己写的width和height指的就是总宽和总高

  • 加了内间距和边框线不会撑大盒子，而是把内容区自动减少

  • 总宽：width

1.3  弹性盒子

• 弹性盒子是控制‘子元素’的布局

• 特点

  • 1.默认子元素横向排列

  • 2.子元素转块了

  • 3.margin:auto可以起效了

  • 4.子元素会受到挤压

• 把一个标签变成弹性盒子：display:flex

• 写给父元素的语句

  • 1.调整主轴的方向：flex-direction

    • 所有的子元素都是沿着主轴排列，所以主轴在在哪里元素就怎么排

    • row:主轴在横向，从左到右

    • row-reverse：反着的横向，从右到左

    • column：纵向，从上到下

    • column-reverse：反着的纵向，从下到上

  • 2.主轴对齐方式：justify-content

    • flex-start：起点

    • flex-end：终点

    • center：居中

    • space-between：2端对齐

    • space-around：2倍间距

    • space-evenly：均分

  • 3.侧轴对齐方式：align-items

    • flex-start：起点

    • flex-end：终点

    • center：居中

    • baseline：基线

    • stretch：拉伸（默认） 要想看到拉伸现象，子元素就不能写宽度或者高度。 侧轴在横向就不写宽度 侧轴在纵向就不写高度

  • 4.换行：flex-wrap

    • wrap：换行

    • nowrap:不换行

    • wrap-reverse:反着换行

  • 5.多行的对齐方式：align-content

    • flex-start

    • flex-end

    • center

    • space-between

    • space-around

    • space-evenly

• 写给子元素的语句

  • 1.单独控制某一个子元素：align-self

    • flex-start

    • flex-end

    • center

    • baseline

    • stretch

  • 2.order：排列顺序，不加单位，能写负数

  • 3.让子元素不挤压：flex-shrink

    • 0：不挤压

    • 1：挤压

  • 4.flex：数字，分配剩余空间比例 写几就是让他占据几份 不写就不参与分配