欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

flex布局各种对齐方式

程序员文章站 2022-04-26 16:05:21
...
/* flex布局 */
	.flex-row {
		display: flex;
		flex-direction: row;
	}

	/* 水平平均分布 */
	.flex_around {
		@extend .flex-row;
		justify-content: space-around;
	}

	/* 水平两端对齐 */
	.flex_between {
		@extend .flex-row;
		justify-content: space-between;
	}

	/** 水平右对齐 */
	.flex_end {
		@extend .flex-row;
		justify-content: flex-end;
	}

	/* 水平居中对齐 */
	.flex_center {
		@extend .flex-row;
		justify-content: center;
	}

	/* 垂直居中 */
	.flex_center_align {
		@extend .flex-row;
		align-items: center;
	}

	/* 水平平均垂直居中 */
	.flex_center_around {
		@extend .flex-row;
		justify-content: space-around;
		align-items: center;
	}

 

相关标签: css css sass