flex基础学习

flex基础学习

弹性布局：
1:弹性容器：设置了display：flex；这个元素为弹性容器，里面的子元素会按照弹性布局的方式进行布局

2:弹性子元素：设置了display：flex；这个弹性容器的直接子元素就是弹子元素。

3:弹性主轴方向：默认主轴从左到右: flex-direction:row/row-reverse(相反)
					主轴从上到下: flex-direction:column
					
4:设置主轴的内容分布:默认从主轴的开始位置靠拢:flex-start 
							   主轴的中心位置靠拢:center
							   主轴的开始位置靠拢:flex-start 
							   主轴的内容平均分布:space-around 两边有间距，两边边距是中间的一半
							   主轴的内容平均分布:space-between两边没有间距
							   主轴的内容平均分布:space-evenly 两边有间距，两边边距是中间的一样

5:设置侧轴的内容分布：默认侧轴的内容分布是侧轴拉伸:stretch(如果设置了高度，那么此属性无效)
				    侧轴的开始位置:flex-start
				    侧轴的结束位置:flex-end		
				    侧轴的中心位置:flex-center

HTML结构

flex设置