allen 自定义样式库（less)

常用class样式表名称和解释

1.flex 弹性盒子布局
2.边距（内外）和 宽高
3. 圆角 文字大小 行高 
4.定位
5.文字布局相关

1.flex弹性布局

横向排列

.row{
    flex-direction: row;
}

纵向排列

.col{
    flex-direction: column;
}

space-between（主轴对齐方式：两端对齐）

.between{
 justify-content: space-between;
}

center（主轴对齐方式：居中对齐）

.flex_center{
 justify-content: cente;
}

flex-start（主轴对齐方式：左对齐）

.flex_start{
 justify-content: flex-start;
}

flex-end（主轴对齐方式：右对齐）

.flex_end{
 justify-content: flex-end ;
}

space-between（交叉轴对齐方式：两端对齐）

.between{
 justify-content: space-between;
}

center（交叉轴对齐方式：居中对齐）

.flex_middle{
 align-items: center
}

flex-start（交叉轴对齐方式：左对齐）

.start{
 align-items: flex-start;
}

flex-end（交叉轴对齐方式：右对齐）

.end{
 align-items:  flex-end ;
}

flex1

.flex1{
 flex:  auto ;
}

auto(1 1 auto) (默认 0 1 auto)

.flex_auto{
 flex:  auto ;
}

none(0 0 auto)

.flex_none{
 flex:  none ;
}

---

2.边距 和 宽高(1-200px)

.loop-padding(200);
.loop-padding(@i) when (@i > 0) {
 .pad_@{i} {
   padding: (@i * 1px);
 }
 .pad_l_@{i} {
   padding-left: (@i * 1px);
 }
 .pad_r_@{i} {
   padding-right: (@i * 1px);
 }
 .pad_t_@{i} {
   padding-top: (@i * 1px);
 }
 .pad_b_@{i} {
   padding-bottom: (@i * 1px);
 }
 .mar_@{i} {
   margin: (@i * 1px);
 }
 .mar_l_@{i} {
   margin-left: (@i * 1px);
 }
 .mar_r_@{i} {
   margin-right: (@i * 1px);
 }
 .mar_t_@{i} {
   margin-top: (@i * 1px);
 }
 .mar_b_@{i} {
   margin-bottom: (@i * 1px);
 }
 .width_@{i} {
   width: (@i * 1px);
 }
 .height_@{i} {
   height: (@i * 1px);
 }
 .loop-padding(@i - 1);

}

---

3.圆角 文字大小 行高 （1-40）

.loop-style-radius(40);
.loop-style-radius(@i) when (@i > 0) {
 .radius@{i} {
   radius@{i}: (@i * 1px);
 }
 .size@{i} {
   font-size: (@i * 1px);
 }
 .linehei@{i} {
   line-height: (@i * 1px);
 }

 .loop-style-radius(@i - 1);

}

---

4.定位

.relative{
  position: relative;
}
.absolute{
  position: absolute;
}
.fixed{
  position: fixed;
}

---

5.文字布局相关

.bold,.bold700{
  font-weight: 700;
}
.bold500{
  font-weight: 500;
}
.bold600{
  font-weight: 600;
}
.bold400{
  font-weight: 400;
}
.v_center{
  text-align: center;
}
.v_left{
  text-align: left;
}
.v_right{
  text-align: right;
}