flex布局笔记,适合后端的懒人布局方式

flex布局方式

1.使用: 给需要使用布局的容器添加上

	desplay: flex;  

2.对齐

 1. 自动换行
		flex-wrap: wrap 

1.对容器内所有子元素操作:

1.横向
	justify-content:  			
		flex-start（默认值）：左对齐
		flex-end：右对齐
		center： 居中
		space-between：两端对齐，项目之间的间隔都相等。
		space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

2.纵向
	align-items:
			flex-start：交叉轴的起点对齐。
			flex-end：交叉轴的终点对齐。
			center：交叉轴的中点对齐。
			baseline: 项目的第一行文字的基线对齐。
			stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。	

2.对容器内某个子元素操作:

	1.纵向:(与align-items属性作用相同)
		align-self:
			flex-start 
			flex-end 
			center 
			baseline 
			stretch;
	2.横向 (1是单位是相对的比例)
		flex-grow:1;