https://less.bootcss.com/
https://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html
https://ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
http://ruanyifeng.com/blog/2015/07/flex-grammar.html
https://www.ruanyifeng.com/blog/2015/07/flex-examples.html
https://developers.weixin.qq.com/miniprogram/dev/component/
/* Flex布局 */
.flexMainX,.flexMainXcenter,.flexMainXXcenter,.flexMainXYcenter,.flexMainY,.flexMainYcenter,.flexMainYXcenter,.flexMainYYcenter,.reverse{display: -webkit-flex; display: flex;}
.flexMainXcenter,.flexMainYcenter{-webkit-justify-content: center; -webkit-align-items: center; justify-content: center; align-items: center;}
.flexMainXXcenter,.flexMainYYcenter{-webkit-justify-content: center; justify-content: center;}
.flexMainXYcenter,.flexMainYXcenter{-webkit-align-items: center; align-items: center;}
.flexMainY,.flexMainYcenter,.flexMainYXcenter,.flexMainYYcenter{-webkit-flex-direction: column; flex-direction: column;}
.flex1{-webkit-flex: 1; flex: 1;}
.flexShrink{-webkit-flex-shrink: 0; flex-shrink: 0;}
.flexWrap{-webkit-flex-wrap: wrap; flex-wrap: wrap;}
.justify-around{-webkit-justify-content: space-around;justify-content: space-around;}
.justify-between{-webkit-justify-content: space-between;justify-content: space-between;}
.justify-end{-webkit-justify-content: flex-end;justify-content: flex-end;}
.column-center{-webkit-align-items: center; align-items: center;}
// 底边对齐
.align-end{
-webkit-align-items: flex-end;
align-items: flex-end;
}
// 倒序 垂直方向
.reverse{
-webkit-flex-direction: row-reverse;
-webkit-flex-direction: column;
-webkit-flex-direction: column-reverse;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
}
// 倒序 水平方向
.row-reverse{
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;
}
/* 清空button默认样式 */
.empty-button {
display: block;
border: none;
padding: 0;
margin: 0;
color: inherit;
font-size: inherit;
line-height: inherit;
background-color: transparent;
&::after{
border: none;
border-radius: inherit;
}
}
.line-limit{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line-clamp2{
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow : hidden;
text-overflow: ellipsis;
}
.line-clamp1{
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.line-clamp3{
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}