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;
}
