Flex布局 总结

Flexbox 学习指南

.container {
	/* 定义flex布局 */
	display: flex;
	
	/* 
	  flex-direction: row 			 表示从左到右布局
	  flex-direction: row-reverse 	 表示从右到左布局
	  flex-direction: column 		 表示从上到下布局
	  flex-direction: column-reverse 表示从下到上布局
	*/
	flex-direction: row;
	
	/* flex-wrap 使容器内的元素换行 */
	flex-wrap: wrap;
	
	/* justify-content 设置元素在主轴上的对齐方式 */
	/* 
		justify-content: flex-start    表示向左/向上元素对齐
		justify-content: flex-end      表示向右/向下元素对齐
		justify-content: center        表示居中对齐
		justify-content: space-between 表示两端对齐, 元素之间平均等分剩余空白间隙部分
		justify-content: space-around  表示元素之间平均等分剩余空白间隙部分, 最左(上)或最右(下)和元素之间距离为1:2
	*/
	justify-content: flex-start;
	
	/* 
		align-items 设置元素在交叉轴的对齐方式
		align-items: flex-start 在交叉轴上向起点位置(向上/向左)对齐
		align-items: flex-end   在交叉轴上向起点位置(向下/向右)对齐
		align-items: center     居中对齐
		align-items: stretch    默认值, 当元素的高度没有设置时, 则元素的高度会拉伸至容器高度一致
		align-items: baseline   保证元素中的文字在同一条基准线(保证每个文字都在同一条线上)
	*/
   align-items: stretch;
   
   /* 
		align-content 当轴线超过1条的时候, flex容器可以把多条轴线视为元素对待, 可以进行对齐
		align-content: flex-start 		向左/向上对齐	
		align-content: flex-end 		向右/向下对齐	
		align-content: center 			居中对齐	
		align-content: stretch 			当宽度width没有设置的时候, 轴线可以被拉伸
		align-content: space-between 	两端对齐, 元素之间的空白等比划分	
		align-content: space-around 	轴线两边的空白等比划分
	*/
   align-content: space-around;
   
   /* 
		order 		控制元素顺序
		flex-grow 	控制元素放大比例
		flex-shrink 控制元素缩小比例
		flex-basis 	设置元素固定或自动空间的占比
		align-self 	重写align-items父属性
	*/
}

引入外部css样式

<style>
	/* 导入外部CSS样式 */
	@import url("flex-wrap.css");
</style>