anmo-user/components/skeleton-ui/libs/helang-flex.scss

/*
 *  uni-app flex 布局盒子
 *  作者:helang
 *  邮箱:helang.love@qq.com
*/

/* 分列式弹性盒子，以X轴从左到右排列 */
.h-flex-x{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	
	/* 水平左对齐 */
	&.h-flex-left{
		justify-content: flex-start;
	}
	
	/* 水平居中对齐 */
	&.h-flex-center{
		justify-content: center;
	}
	
	/* 水平右对齐 */
	&.h-flex-right{
		justify-content: flex-end;
	}
	
	/* 水平两端对齐 */
	&.h-flex-space{
		justify-content: space-between;
	}
	
	/* 垂直顶部对齐 */
	&.h-flex-top{
		align-items: flex-start;
		align-content: flex-start;
	}
	
	/* 垂直底部对齐 */
	&.h-flex-bottom{
		align-items: flex-end;
		align-content: flex-end;
	}
	
	/* 允许换行 */
	&.h-flex-wrap{
		flex-wrap: wrap;
	}
	
	/* 等比分列，2-6列 */
	@for $i from 2 through 6
	{
		&.h-flex-#{$i}{
			&>view{
				width:(100% / $i);
			}
		}
	}
	
	/* 弹性元素 */
	&>.h-flex-item-grow{
		flex-grow: 1;
		width:0;
	}
}

/* 分行式弹性盒子，以Y轴从上到下排列 */
.h-flex-y{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	
	/* 垂直居中对齐 */
	&.h-flex-center{
		justify-content: center;
		align-items: center;
		align-content: center;
	}
	
	/* 水平左对齐 */
	&.h-flex-left{
		align-items: flex-start;
		align-content: flex-start;
	}
	
	/* 水平右对齐 */
	&.h-flex-right{
		align-items: flex-end;
		align-content: flex-end;
	}
	
	/* 垂直两端对齐 */
	&.h-flex-space{
		justify-content: space-between;
	}
	
	/* 垂直顶部对齐 */
	&.h-flex-top{
		justify-content: flex-start;
	}
	
	/* 垂直底部对齐 */
	&.h-flex-bottom{
		justify-content: flex-end;
	}
	
	/* 等比分行，2-6行 */
	@for $i from 2 through 6
	{
		&.h-flex-#{$i}{
			&>view{
				height:(100% / $i);
			}
		}
	}
	
	/* 弹性元素 */
	&>.h-flex-item-grow{
		flex-grow: 1;
		height: 0;
	}
}