【Cxinny】常用css记录

最新推荐文章于 2024-09-07 19:05:57 发布

Cxinny

最新推荐文章于 2024-09-07 19:05:57 发布

阅读量63

点赞数

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/Cxinny/article/details/131667662

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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