标签：rap 才有 项目 ali 垂直居中 数字 水平垂直 css3 base
怪异盒模型
box-sizing:content-box 标准盒模型 总宽/高度=width+左右/上下padding+左右/上下border
box-sizing:border-box 怪异盒模型（IE盒模型） 总宽/高度=width(包含padding和border)
弹性盒
特点：
1、在弹性盒里，所有子元素按照“主轴”排列
2、在弹性盒里，所有子元素都能设置宽高
3、在弹性盒里，一个元素如果在里面水平垂直居中，只需设置margin:auto;
display:flex; 使当前元素成为弹性盒，进而控制子元素
flex-direction 改变主轴
row 默认x轴为主轴，横向排列
row-reverse 反转横向排列，右对齐，从后往前排，最后一项排在最前面。x轴底部显示（右）
column y轴为主轴，纵向排列
column-reverse 反转纵向排列，从下往上排，最后一项排在最上面 。y轴底部显示（下）
justify-content 元素在主轴上的对齐方式
flex-start 默认，顶端对齐
flex-end 末端对齐
center 居中对齐
space-between 两端对齐，中间自动分配
space-around 自动分配距离
align-items 元素在侧轴上的对齐方式
flex-start 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。顶部显示
flex-end 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。底部显示
center 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline 如弹性盒子元素的行内轴与侧轴为同一条，则该值与‘flex-start‘等效。其它情况下，该值将参与基线对齐。 当子元素被padding撑开时，不与flex-start等效。
stretch 默认值，拉伸，子元素无高时，将高拉伸为父元素高。
flex-wrap 是否换行
nowrap 默认值，flex容器为单行。该情况下flex子项可能会溢出容器
wrapflex 容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse 反转 wrap 排列。
注：当父元素有高度时，换行自带行间距
align-content 行与行之间的对齐方式
flex-start 没有行间距
flex-end 底对齐没有行间距
center 居中没有行间距
space-between 两端对齐，中间自动分配
space-around 自动分配距离
注：只针对多行
align-self 写在子元素上面，控制某一个子元素在侧轴的对齐方式
auto 默认值。
stretch 元素被拉伸以适应容器
center 元素位于容器的中心
flex-start 元素位于容器的开头
flex-end 元素位于容器的结尾
order 排列顺序 --- 排序优先级，数字越大越往后排，默认为0，支持负数。
flex 复合属性
flex-grow 拉伸，默认值为0，子元素宽高加起来小于父元素宽高，要有剩余空间，才会有效果，拉伸是宽是高跟主轴有关
flex-shrink 元素宽高超出父元素宽高才有效。为0时，无变化
flex-basis 项目长度
flex:1 将弹性盒主轴上剩余的空间全部分配给当前元素
复合式写法 flex:0 1 auto; 参数分别代表flex-grow、flex-shrink、flex-basis
标签：rap 才有 项目 ali 垂直居中 数字 水平垂直 css3 base
原文地址：https://www.cnblogs.com/yznotes/p/12826357.html
