css-布局

布局

表格布局–浮动布局–定位布局–多列布局

dispiay:table-call; 表格单元格

​

弹性布局

flex 弹性伸缩盒布局

可以实现自动伸缩

主轴和侧轴

	dispiay:flex;
	<!-- 默认：主轴X轴 起始线在左边 -->
	
	flex-direction:row-reverse;
	<!-- row 主轴X轴 colum 主轴Y轴 -->
	<!-- reverse 根据主轴改变相反起始线 -->
	flex-wrap:wrap;
	<!-- nowrap 默认不换行 wrap 换行 -->

	flex-flow:row-reverse norap;
	<!-- 上面两种的综合 -->
	
	justify-content: space-between;
	<!-- 设置子元素在主轴排列 -->
	<!-- space-around 两端对齐-->
	<!-- space-between 平均左右外边距 -->
	<!-- space-evenly 平均剩余空间 -->

	align-items:center;
	<!-- 设置子元素在侧轴排列 cener 侧轴居中-->

	align-self:flex-end;
	<!-- 单独设设置子元素 -->