flex.scss

@import "../variables/default";
@import "./gen-mixins/flex";

/**
 * flex
 */

#{$computed-prefix}flex {
	display: flex;
	box-sizing: border-box;
}

// 圣杯布局
#{$computed-prefix}flex-holy {
	display: flex;
	min-height: 100vh;
	box-sizing: border-box;
	flex-direction: column;
}

// 水平垂直对齐
#{$computed-prefix}flex-cc {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
}

#{$computed-prefix}flex-ac {
	display: flex;
	box-sizing: border-box;
	align-items: center;
}

#{$computed-prefix}col {
	flex: 1;
}

#{$computed-prefix}col-2 {
	flex: 2;
}

#{$computed-prefix}1of1 {
	flex: 0 0 100%;
}

$flex-attrs-map: (
	"flex-direction": (row, column, row-reverse, column-reverse),
	"flex-wrap": (wrap, wrap-reverse, nowrap),
	"justify-content": (flex-start, flex-end, center, space-between, space-around),
	"align-items": (flex-start, flex-end, center, baseline, stretch),
	"align-content": (flex-start, flex-end, center, space-between, space-around, stretch),
	"align-self": (auto, flex-start, flex-end, center, baseline, stretch)
);
$flex-options: (prefix: $prefix);

@include flex-arrts($flex-attrs-map, $flex-options);
@include flex-size(5, $flex-options);