/*设置常见布局*/

//水平方向上布局
@mixin msp-flex-container {

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  flex-wrap: wrap;
}

.msp-flex-vertical-container {

  @include msp-flex-container;

}

//垂直方向上布局
@mixin msp-flex-vertical-container {

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  flex-wrap: wrap;
}

.msp-flex-vertical-container {

  @include msp-flex-vertical-container;

}

//设置Flex上元素
@mixin msp-flex-item($width) {

  flex: 1 0 $width;

}

.msp-flex-item-1-2 {
  @include msp-flex-item(50%);

}

.msp-flex-item-1-3 {
  @include msp-flex-item(33.33%);
}

.msp-flex-item-2-3 {
  @include msp-flex-item(66.67%);
}

.msp-flex-item-1-4 {
  @include msp-flex-item(25%);
}

.msp-flex-item-3-4 {
  @include msp-flex-item(75%);
}