web前端开发第一阶段——弹性盒模型

弹性盒模型（多用于移动端）
要形成：需要在其父级加弹性空间

1、开启弹性空间

display
	新版：flex
	老版：-webkit-box  两个都写：兼容性

2、先定主轴方向

	改变主轴方向，主轴不同方向不同
	新版： 
	flex-directive:
		row:主轴在水平方向排列
		column:主轴在垂直方向
	旧版： 
		-webkit-box-orient：
				horizontal:主轴在水平方向排列
				vertical:主轴在垂直方向

3、排列方式

	默认从左往右
	新：flex-directive:row
								row-reverse 从右向左
		   column-reverse 从下往上
	旧：
	排列方向
		-webkit-box-orient：horizontal
		-webkit-box-direction：reverse 倒排
											normal 顺排默认
		-webkit-box-orient：vertical
		-webkit-box-direction：reverse 倒排
											normal 顺排默认

4、内容方向在父级设置

	设置主轴的富裕空间——>根据主轴不同，方向不同，竖直/水平
		在父级设置
		新版本：
			justify-content：
		旧版本：
			-webkit-box-pack：
			start默认主轴开始位置
			end 开始位置从主轴结束位置开始
			center:从主轴中间开始
			justify:富裕空间均匀分布在元素两侧
			
	设置侧轴富裕空间——>水平
	新版本：
		align-items：
			flex-syart
			flex-end
			center：侧轴
			baseline
		旧版本：
			-webkit-box-align：
				start
				center
				end 
		-webkit-box-flex:设置子集占的份数
			详细笔记见19-9-19号课件PPT