管用常用的CSS样式库整理:拿来即用CSS,便捷化的Flex组合通用属性配置::便于网页/小程序快速设置样式属性实现想要的效果::

管用常用的CSS样式库整理:拿来即用CSS,便捷化的Flex组合通用属性配置::便于网页/小程序快速设置样式属性实现想要的效果::

好用效果属性集合,需要一定的css基础(无实际效果展示),了解flex布局后会发现本文是一个宝藏,欢迎补充…

使用场景:

• 快速实现界面对齐方式,如水平垂直居中(含水平居中/垂直居中等)
• 一些:固定/多行省略(超行省略)/每行显示几列等(常用效果不断添加中…欢迎补充)

使用要求

1. 对于flex属性,需要组合使用即必须先引用flex属性,然后组合使用垂直水平上的四个设置,如实现水平垂直居中: .flex .j-c .a-c
2. 对于常用的css只要class正常引用相应的样式就行,如.r

样式代码设置

下面展示一些 内联代码片。

 /* flex布局设置:组合属性设置必先flex属性
 c：center 居中(有水平j/垂直v两个属性,下同)
 s：flex-start 居左开始(水平)|居上开始(垂直)
 e：flex-end  居右开始(水平)|居下开始(垂直)
 a: space-around  等距,均匀排列每个元素,每个元素周围分配相同的空间
 b: space-between  两极,均匀排列每个元素,首个元素放置于起点
 v：垂直 | j：水平
 */
 
 /* flex布局 */
 .flex{
     display: flex;
 }
 /* flex多行 */
 .wrap{
     flex-wrap: wrap;
 }
 
 /* v：垂直flex j：水平flex */
 /* 垂直居中 */
 .v_c{
     align-items: center;
     align-content: center;
 }
 /* 垂直向上 */
 .v_s{
     align-items: flex-start;
     align-content: flex-start;
 }
 /* 垂直向下 */
 .v_e{
     align-items: flex-end;
     align-content: flex-end;
 }
 /* 垂直等距 */
 .v_a{
     align-content: space-around;
 }
 /* 垂直两极 */
 .v_b{
     align-content: space-between;
 }
 
 /* 水平居中 */
 .j_c{
     justify-content: center;
 }
 /* 水平等距 */
 .j_a{
     justify-content: space-around;
 }
 /* 水平两极 */
 .j_b{
     justify-content: space-between;
 }
 /* 水平靠左 */
 .j_s{
     justify-content: flex-start;
 }
 /* 水平靠右 */
 .j_e{
     justify-content: flex-end;
 }
 /* flex布局设置:组合属性设置必先flex属性 */
 
 /* 其他常用样式属性设置 */
 /* 边框样式 */
 .r{
     border: 1px red solid;
 }
 /* 多行省略 */
 .line_1{
     overflow : hidden;
     display: -webkit-box;    /*弹性伸缩盒子*/
     -webkit-box-orient: vertical; /*子元素垂直排列*/
     -webkit-line-clamp: 1;   /*可以显示的行数，超出部分用...表示*/
     text-overflow: ellipsis; /*（多行文本的情况下，用省略号“…”隐藏溢出范围的文本)*/
 }
 .line_2{
     overflow : hidden;
     display: -webkit-box;    
     -webkit-box-orient: vertical; 
     -webkit-line-clamp: 2;   
     text-overflow: ellipsis;
 }
 .line_3{
     overflow : hidden;
     display: -webkit-box;   
     -webkit-box-orient: vertical; 
     -webkit-line-clamp: 3;   
     text-overflow: ellipsis; 
 }
 /* 固定 */
 .fixed{
     position: fixed;
 }
 /* 文本对齐 */
 .text_c{
     text-align: center;
 }
 .text_r{
     text-align: right;
 }
 .text_j{
     text-align: justify;
 }
 /* column-count每行分几列 */
 .col_2{
      -webkit-column-count: 2; /* Chrome, Safari, Opera */
     -moz-column-count: 2; /* Firefox */
     column-count: 2;
 }
 .col_3{
     -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
 }
 .col_4{
     -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
 }
 .col_5{
     -webkit-column-count: 5; /* Chrome, Safari, Opera */
    -moz-column-count: 5; /* Firefox */
    column-count: 5;
 }

使用案例

实现一个容器中元素成一行,并且实现水平垂直居中的效果
<div class=".flex .j-c .a-c"></div>
给一个元素添加边框属性
<div class=".r">