allen 自定義樣式庫(kù)（less)
常用class樣式表名稱(chēng)和解釋
1.flex 彈性盒子布局
2.邊距（內(nèi)外）和 寬高
3. 圓角 文字大小 行高
4.定位
5.文字布局相關(guān)
1.flex彈性布局
橫向排列
.row{
flex-direction: row;
}
縱向排列
.col{
flex-direction: column;
}
space-between（主軸對(duì)齊方式：兩端對(duì)齊）
.between{
justify-content: space-between;
}
center（主軸對(duì)齊方式：居中對(duì)齊）
.flex_center{
justify-content: cente;
}
flex-start（主軸對(duì)齊方式：左對(duì)齊）
.flex_start{
justify-content: flex-start;
}
flex-end（主軸對(duì)齊方式：右對(duì)齊）
.flex_end{
justify-content: flex-end ;
}
space-between（交叉軸對(duì)齊方式：兩端對(duì)齊）
.between{
justify-content: space-between;
}
center（交叉軸對(duì)齊方式：居中對(duì)齊）
.flex_middle{
align-items: center
}
flex-start（交叉軸對(duì)齊方式：左對(duì)齊）
.start{
align-items: flex-start;
}
flex-end（交叉軸對(duì)齊方式：右對(duì)齊）
.end{
align-items: flex-end ;
}
flex1
.flex1{
flex: auto ;
}
auto(1 1 auto) (默認(rèn) 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.文字布局相關(guān)
.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;
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
