3.CSS案例

标准起手动作

1. 间隙清空

因为每个标签, p, h1…都是有padding和margin的, 而每个浏览器又不一样, 所以清空先

*{padding:0; margin:0;}

2.flex布局

2.flex布局

类型	属性	取值示例（含注释）	中文说明
容器属性 (作用于父元素)	display	flex ——启用弹性盒布局	将元素设为Flex容器，子元素变为Flex项目
	flex-direction	row（水平从左到右，默认） row-reverse（水平从右到左） column（垂直从上到下） column-reverse（垂直从下到上）	定义主轴方向（即项目的排列方向）
	flex-wrap	nowrap（不换行，默认） wrap（换行，新行在下方） wrap-reverse（换行，新行在上方）	控制项目是否换行及换行堆叠方向
	justify-content	flex-start（主轴起点对齐，默认） flex-end（主轴终点对齐） center（主轴居中对齐） space-between（剩余空间平均分配） space-around（类似between,但是不会贴边, 两端会显得更窄） space-evenly（等距对齐）	定义项目在主轴上的对齐与分布方式
	align-items	stretch（拉伸填充，默认） flex-start（交叉轴起点对齐） flex-end（交叉轴终点对齐） center（交叉轴居中对齐） baseline（基线对齐）	定义单行项目在交叉轴上的对齐方式
	align-content	stretch（行间填充） flex-start（多行起点对齐） flex-end（多行终点对齐） center（多行居中对齐） space-between（多行间距均匀） space-around（多行环绕）	定义多行在交叉轴上的分布方式（需配合flex-wrap: wrap生效）
项目属性 (作用于子元素)	flex-grow	0（不放大，默认） 1, 2…（按比例放大，如两个项目均为1则平分剩余空间）	空间有剩余时，项目的放大比例
	flex-shrink	1（可缩小，默认） 0（禁止缩小） 2（缩小比例更高）	空间不足时，项目的缩小比例
	flex-basis	auto（根据内容自适应，默认） 100px（固定宽度） 20%（百分比宽度）	分配多余空间前，项目在主轴上的基准尺寸
	flex	0 auto（不放大可缩小，默认值） 1（等比放大） none（不缩放）	flex-grow/flex-shrink/flex-basis的简写形式
	align-self	auto（继承父容器align-items属性，默认） flex-start / center / stretch（单独设置对齐方式）	单个项目在交叉轴上的对齐方式（可覆盖容器设置）
	order	0（默认顺序） -1（提前） 2（延后）	控制项目显示顺序（数值越小越靠前，支持负数）