// flex(主轴,交叉轴,方向,换行,多轴线对齐)
|
@mixin flex($justify: null, $align: null, $direction: null, $warp: null, $warpAlign: null) {
|
display: flex;
|
|
@if $direction != null {
|
@include flex-direction($direction);
|
}
|
@if $justify != null {
|
@include flex-justify($justify);
|
}
|
@if $align != null {
|
@include flex-align($align);
|
}
|
@if $warp != null {
|
@include flex-warp($warp);
|
}
|
@if $warpAlign != null {
|
@include flex-warpAlign($warpAlign);
|
}
|
}
|
|
// flex-self(对齐,(布满||固定),顺序)
|
@mixin flex-self($flex: null, $align: null, $order: null){
|
@if $flex != null {
|
@if $flex == full {
|
flex: auto;
|
} @else if $flex == keep {
|
flex: none;
|
} @else {
|
@include flexError($flex, 'flex-self');
|
}
|
}
|
|
@if $align != null {
|
@include flex-selfAlign($align);
|
}
|
|
@if $order != null {
|
@include flex-order($order);
|
}
|
}
|
|
// flex错误提示
|
@mixin flexError($param, $type) {
|
position: relative;
|
background-color: #ff3c00 !important;
|
overflow: hidden;
|
|
&::after {
|
position: absolute;
|
bottom: 0;
|
right: 0;
|
padding: 0.5em;
|
color: #ff3c00 !important;
|
background-color: white !important;
|
font-size: 12px;
|
content: 'ErrorParam: #{$param} in #{$type}';
|
}
|
}
|
|
// 项目的排列方向
|
@mixin flex-direction($direction: row) {
|
@if $direction == column {
|
flex-direction: column;
|
} @else if $direction == row {
|
flex-direction: row;
|
} @else if $direction == row-reverse {
|
flex-direction: row-reverse;
|
} @else if $direction == column-reverse {
|
flex-direction: column-reverse;
|
} @else {
|
@include flexError($direction, 'flex-direction');
|
}
|
}
|
|
// 主轴上的对齐方式
|
@mixin flex-justify($justify: start) {
|
@if $justify == start {
|
justify-content: start;
|
} @else if $justify == center {
|
justify-content: center;
|
} @else if $justify == end {
|
justify-content: flex-end;
|
} @else if $justify == between {
|
justify-content: space-between;
|
} @else if $justify == around {
|
justify-content: space-around;
|
} @else {
|
@include flexError($justify, 'flex-justify');
|
}
|
}
|
|
// 交叉轴上的对齐方式
|
@mixin flex-align($align: top) {
|
@if $align == top {
|
align-items: flex-start;
|
} @else if $align == center {
|
align-items: center;
|
} @else if $align == bottom {
|
align-items: flex-end;
|
} @else {
|
@include flexError($align, 'flex-align');
|
}
|
}
|
|
// 换行
|
@mixin flex-warp($warp: wrap) {
|
@if $warp == wrap {
|
flex-wrap: wrap;
|
} @else if $warp == nowrap {
|
flex-wrap: nowrap;
|
} @else if $warp == wrap-reverse {
|
flex-wrap: wrap-reverse;
|
} @else {
|
@include flexError($warp, 'flex-wrap');
|
}
|
}
|
|
// 换行多根轴线的对齐方式,如果项目只有一根轴线，该属性不起作用
|
@mixin flex-warpAlign($align: stretch) {
|
@if $align == stretch {
|
align-content: stretch;
|
} @else if $align == top {
|
align-content: flex-start;
|
} @else if $align == center {
|
align-content: center;
|
} @else if $align == bottom {
|
align-content: flex-end;
|
} @else if $align == between {
|
align-content: space-between;
|
} @else if $align == around {
|
align-content: space-around;
|
} @else {
|
@include flexError($align, 'flex-wrapAlign');
|
}
|
}
|
|
// 单个项目有与其他项目不一样的对齐方式
|
@mixin flex-selfAlign($align: auto){
|
@if $align == auto {
|
align-self: auto;
|
} @else if $align == top {
|
align-self: flex-start;
|
} @else if $align == center {
|
align-self: center;
|
} @else if $align == bottom {
|
align-self: flex-end;
|
} @else if $align == baseline {
|
align-self: baseline ;
|
} @else if $align == stretch {
|
align-self: stretch;
|
} @else {
|
@include flexError($align, 'flex-self-align');
|
}
|
}
|
|
// 项目的排列顺序,数值越小，排列越靠前，默认为0
|
@mixin flex-order($order: 0){
|
@if $order == round($order) {
|
order: $order;
|
} @else {
|
@include flexError($order, 'flex-self-order');
|
}
|
}
|
