flex布局

class="min-flex"

默认居中对齐(对应下面的默认值)

默认

class="min-flex min-flex-center"

对应flex -> justify-content属性

左对齐

右对齐

居中对齐(默认)

两端对齐

两侧对齐

class="min-flex min-flex-dir-left"

对应flex -> flex-direction属性

水平向右(默认)

水平向左

垂直向下

垂直向上

class="min-flex min-flex-align-center"

对应flex -> align-items属性

起点对齐

终点对齐

中点对齐(默认)

基线对齐

拉伸铺满

class="min-flex min-flex-wrap-nowrap"

对应flex -> flex-wrap属性

不换行(默认)

换行向下

换行向上

min-flex-number 项目大小(最高min-flex-8)

代码分享

          
xxxxxxxxxx
.min-flex {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.min-flex-dir-left {
  flex-direction: row;
}
.min-flex-dir-right {
  flex-direction: row-reverse;
}
.min-flex-dir-top {
  flex-direction: column;
}
.min-flex-dir-bottom {
  flex-direction: column-reverse;
}
.min-flex-main-center {
  justify-content: center;
}
.min-flex-main-start {
  justify-content: flex-start;
}
.min-flex-main-end {
  justify-content: flex-end;
}
.min-flex-main-between {
  justify-content: space-between;
}
.min-flex-main-around {
  justify-content: space-around;
}
.min-flex-wrap-nowrap {
  flex-wrap: nowrap;
}
.min-flex-wrap-wrap {
  flex-wrap: wrap;
}
.min-flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}
.min-flex-align-center {
  align-items: center;
}
.min-flex-align-top {
  align-items: flex-start;
}
.min-flex-align-bottom {
  align-items: flex-end;
}
.min-flex-align-baseline {
  align-items: baseline;
}
.min-flex-align-stretch {
  align-items: stretch;
}
.min-flex-1 {
  flex: 1
}
.min-flex-2 {
  flex: 2
}
.min-flex-3 {
  flex: 3
}
.min-flex-4 {
  flex: 4
}
.min-flex-5 {
  flex: 5
}
.min-flex-6 {
  flex: 6
}
.min-flex-7 {
  flex: 7
}
.min-flex-8 {
  flex: 8
}