//Flex布局
#{$V}box {
    display: flex;
    flex-wrap: wrap;
    margin: {
    	right: - rem(5);
    	left: - rem(5);
    }

	//换行，第一行在下方
	&.v-wrap-reverse {
		flex-wrap: wrap-reverse;
	}
	//不换行
	&.v-nowrap {
		flex-wrap: nowrap;
	}
	//水平方向，起点在右端
	&.v-horizontal-reverse {
		flex-direction: row-reverse;
	}
	//垂直方向
	&.v-vertical {
		flex-direction: column;
	}
	//垂直方向，起点在下沿
	&.v-vertical-reverse {
		flex-direction: column-reverse;
	}
	//左对齐
	&.v-justify-start {
		justify-content: flex-start;
	}
	//右对齐
	&.v-justify-end {
		justify-content: flex-end;
	}
	//居中
	&.v-justify-center {
		justify-content: center;
	}
	//两端对齐，项目之间的间隔都相等
	&.v-justify-between {
		justify-content: space-between;
	}
	//每个项目两侧的间隔相等
	&.v-justify-around {
		justify-content: space-around;
	}
	//交叉轴的起点对齐
	&.v-items-start {
		align-items: flex-start;
	}
	//交叉轴的终点对齐
	&.v-items-end {
		align-items: flex-end;
	}
	//交叉轴的中点对
	&.v-items-center {
		align-items: center;
	}
	//项目的第一行文字的基线对齐
	&.v-items-baseline {
		align-items: baseline;
	}
	//与交叉轴的起点对齐
	&.v-content-start {
		align-content: flex-start;
	}
	//与交叉轴的终点对齐
	&.v-content-end {
		align-content: flex-end;
	}
	//与交叉轴的中点对齐
	&.v-content-center {
		align-content: center;
	}
	//与交叉轴两端对齐，轴线之间的间隔平均分布
	&.v-content-between {
		align-content: space-between;
	}
	//每根轴线两侧的间隔都相等(间隔大一倍)
	&.v-content-around {
		align-content: space-around;
	}
}

//排列
%flex-col {
	width: 100%;
    min-height: rem(1);
    position: relative;
    padding: {
    	right: rem(5);
    	left: rem(5);
    }
}
//col
@for $i from 1 through 12 {
	#{$V}col-#{$i} {
		@extend %flex-col;
	}
}
//flex
@for $i from 1 through 10 {
	#{$V}flex-#{$i} {
		@extend %flex-col;
	}
}
#{$V}col,
#{$V}flex {
	@extend %flex-col;

	&-auto {
		@extend %flex-col;
	}
}
//col && flex
#{$V}col,
#{$V}flex {
    max-width: 100%;
    flex-basis: 0;
    flex-grow: 1;

    &-auto {
	    width: auto;
    	max-width: none;
	    flex: 0 0 auto;
    }
}
//collapse
@for $i from 1 through 12 {
	#{$V}col-#{$i} {
		max-width: 100% / 12 * $i;
		flex: 100% / 12 * $i;
	}
}

//flex
@for $i from 1 through 10 {
	#{$V}flex-#{$i} {
		max-width: 100% / $i;
		flex: 0 0 100% / $i;
	}
}

//列偏移
@for $i from 1 through 11 {
	#{$V}offset-#{$i} {
		margin-left: 100% / 12 * $i;
	}
}

//排列顺序
@for $i from -1 through 13 {
	@if $i == -1 {
		#{$V}order-first {
			order: $i;
		}
	}
	@else if $i == 13 {
		#{$V}order-last {
			order: $i;
		}
	}
	@else {
		#{$V}order-#{$i} {
			order: $i;
		}
	}
}

//网格边距
#{$V}box {
	@for $i from 1 through 10 {
		//左右
		&.v-lr-#{$i} {
			margin: {
				left: - rem($i);
				right: - rem($i);
			}
			
			> #{$V}flex,
			> [class*="vus-flex-"],
			> #{$V}col,
			> [class*="vus-col-"] {
				padding: {
					left: rem($i);
					right: rem($i);
				}
			}
		}
		//上下
		&.v-tb-#{$i} {
			margin: {
				top: - rem($i);
				bottom: - rem($i);
			}

			> #{$V}flex,
			> [class*="vus-flex-"],
			> #{$V}col,
			> [class*="vus-col-"] {
				padding: {
					top: rem($i);
					bottom: rem($i);
				}
			}
		}
	}
}

//媒体查询
@each $device, $value in $media-min-width {
    @if $device != "us" {
        @include media-min($device) {

        	//col && flex
			#{$V}col-#{$device},
			#{$V}flex-#{$device} {
			    max-width: 100%;
			    flex-basis: 0;
			    flex-grow: 1;

			    &-#{$device}-auto {
				    width: auto;
			    	max-width: none;
				    flex: 0 0 auto;
			    }
			}
			//collapse
			@for $i from 1 through 12 {
				#{$V}col-#{$device}-#{$i} {
					max-width: 100% / 12 * $i;
					flex: 100% / 12 * $i;
				}
			}

			//flex
			@for $i from 1 through 10 {
				#{$V}flex-#{$device}-#{$i} {
					max-width: 100% / $i;
					flex: 0 0 100% / $i;
				}
			}

			//列偏移
			@for $i from 1 through 11 {
				#{$V}offset-#{$device}-#{$i} {
					margin-left: 100% / 12 * $i;
				}
			}

			//排列顺序
			@for $i from -1 through 13 {
				@if $i == -1 {
					#{$V}order-#{$device}-first {
						order: $i;
					}
				}
				@else if $i == 13 {
					#{$V}order-#{$device}-last {
						order: $i;
					}
				}
				@else {
					#{$V}order-#{$device}-#{$i} {
						order: $i;
					}
				}
			}

            //网格边距
            @for $i from 1 through 10 {
				#{$V}box {
					//左右
					&.v-lr-#{$device}-#{$i} {
						margin: {
							left: - rem($i);
							right: - rem($i);
						}
						
						> #{$V}flex-#{$device},
						> [class*="vus-flex-#{$device}-"],
						> #{$V}col-#{$device},
						> [class*="vus-col-#{$device}-"] {
							padding: {
								left: rem($i);
								right: rem($i);
							}
						}
					}
					//上下
					&.v-tb-#{$device}-#{$i} {
						margin: {
							top: - rem($i);
							bottom: - rem($i);
						}

						> #{$V}flex-#{$device},
						> [class*="vus-flex-#{$device}-"],
						> #{$V}col-#{$device},
						> [class*="vus-col-#{$device}-"] {
							padding: {
								top: rem($i);
								bottom: rem($i);
							}
						}
					}
				}
            }
        }
    }
}


//无边距
#{$V}box {
	//左右
	&.v-nm-lr {
		margin: {
			left: 0;
			right: 0;
		}
	}
	&.v-np-lr > {
		#{$V}flex,
		[class*="vus-flex-"],
		#{$V}col,
		[class*="vus-col-"] {
			padding: {
				left: 0;
				right: 0;
			}
		}
	}
	//上下
	&.v-nm-tb {
		margin: {
			top: 0;
			bottom: 0;
		}
	}
	&.v-np-tb > {
		#{$V}flex,
		[class*="vus-flex-"],
		#{$V}col,
		[class*="vus-col-"] {
			padding: {
				top: 0;
				bottom: 0;
			}
		}
	}
}