day22 knowledge
1. Weird box model:
box-sizing:
attribute value: box-sizing: content-box; regular box model
box-sizing: border-box; weird box model (IE box model)
触发怪异盒模型：
box-sizing:border-box;
怪异盒模型特点：padding和border都会在元素的宽高的内部，不会把盒子撑大。
Second, the flexible box model
Elastic box: layout scheme
Function: control the child element closest to it, layout method
features: 1, the closest child element in the elastic box is centered left and right, just add to the child element margin: auto is just
2, and the child elements in the flexible box are arranged along the "main axis"
3, "main axis": it may be the x axis, or it may be the y axis. If x is the main axis, the y axis is the side axis
4, and the child element in the layer closest to it can be added to the size
触发弹性盒子：
display：flex；
改变主轴的方向
flex-direction：
属性 ：row （默认值：x轴）
column （y轴）
column-revese （以y轴为主轴方向排列）
row-revese （以x轴为主轴方向排列）
改变主轴的对齐方式
justify-content：
属性值：flex-start （默认状态，在弹性盒子开始的位置显示）
flex-end （在弹性盒子末端对齐）
center （居中对齐）
space-between （两端对齐）
space-around （自动分配间距）
侧轴的对齐方式
align-items：
属性值：flex-start （侧轴开始的位置）
flex-end （侧轴结束的位置）
center （侧轴居中的位置）
baseline （基线与flex-start等效）
stretch （默认值 拉伸效果）
控制弹性盒子里面的子元素（灵活元素）换行处理
flex-wrap：
wrap 换行
no-wrap 不换行
warp-peverse 反向换行
控制行与行的对齐方式
align-content：
flex-start 默认状态：行与行之间不存在默认的行间距
flex-end 在弹性盒子末端对齐
center 居中对齐
space-between 末端对齐
space-around 自动分配间距
补充：flex-direction 和 flex-warp 简写 flex-flow：；
控制弹性盒子里面 某个 灵活元素 在侧轴的对齐方式
align-self：
auto 默认值：元素继承了它的父容器 align-items 属性。 如果没有父容器则为“stretch”
stretch 元素备拉伸以适应容器
center 元素位于容器的中心
flex-start 元素位于容器的开头
flex-end 元素位于容器的结尾
控制子元素的排列顺序：
order：数值越大越往后排列。支持负数
剩余空间的分配
flex：1； 分配主轴剩余的空间
flex：1；（为简写方式）
flex-grow 扩展的量
flex-shrink 收缩的量
flex-basis 元素的大小
flex-shrink：0； 不压缩
多列属性：
列数：column-count
列间距 column-gap
列分割线 column-fule
控制每一列的高度时候统一
column-fill：；
aoto 列高度自适应
balance 有列的高度以其中最高的一列统一
跨列 column-span：all；
列宽 column-width
columns：7； cloumn-count 和column-width 的简写
