前端学习第十六天

怪异盒子模型

属性box-sizing;
content-box 默认值
box-sizing:border-box默认跟盒子宽度大小一致，padding值还有border值不会撑大盒子
padding值还有border值不能超过怪异盒模型数值

弹性盒子

属性：display：flex 定义弹性盒子，默认把x轴当成主轴，设定之后可以设置宽度高度
flex 主轴顶端对齐方式
justify-content：主轴对齐方式
flex-start：默认值 主轴顶端对齐
flex-end：主轴末端对齐
center：主轴居中对齐
space-between：在主轴两端对齐，中间自动分配
space-around：在主轴自动分配空白空间
space-evenly：平均分配空白空间

改变主轴方向属性

属性flex-direction
属性值row：默认排列
row-reverse;翻转坐标轴
column：y轴排列
column-reverse：y轴翻转坐标轴

弹性盒子换行

属性：flex-wrep换行
no-wrep默认不换行
wrep换行
wrep-reverse：反转换行列

弹性盒子行与行之间的对齐方式

属性align-content：行与行之间的对齐方式
属性值：flex-start默认顶端对齐换行
属性值：flex-end底部对齐换行
属性值：center:中间对齐
属性值：space-between：行和行两端对齐中间自动分配侧轴剩余空间
属性值：space-around：行和行自动分配侧轴剩余空间
属性值：stretch：默认值行和行补强制拉伸以适应容器侧轴的长度
属性值：space-evenly平均分配空白空间

在交叉轴对齐方式、侧轴的对齐的方式

属性：align-items
属性值：flex-start：默认值
属性值：flex-end：弹性盒子元素在伸缩容器里延侧轴末端对齐
属性值：center:弹性盒子元素在伸缩容器里延侧轴居中对齐
属性值：baseline：弹性盒子元素在伸缩容器里延侧轴基线对齐
属性值：stretch：默认值：项目末设置侧轴的尺寸是拉伸成容器的侧轴尺寸

子元素的对齐方式

属性：align-self
属性值：flex-start：默认值
属性值：flex-end：弹性盒子元素在伸缩容器里延侧轴末端对齐
属性值：center:弹性盒子元素在伸缩容器里延侧轴居中对齐
属性值：stretch：默认值

子属性设置

属性：flex-grow：数值
0数值后面有空间不占
1数值后面有空间全部沾满
属性：flex-shrink:数值
默认0：盒子不压缩回归本来的样式

复合属性

属性：flex
数值1：会影响换行

控制伸缩项目的顺序

属性：order：数值
数值越大越往后排

属性flex-flow
是flex-direction属性和flex-wrep的简写