常用css

1. 单行省略
   

   /*
   * 强制不换行： white-space: nowrap;
   * 超出隐藏： overflow: hidden
   * 超出的文本显示省略号： text-overflow: ellipsis;
   * 需要设置宽度
   */
   .t-ellipsis {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       /* width: 100%; */
   }

2. 多行省略
   

   /*
   * 超出隐藏： overflow:hidden;
   * 超出的文本显示省略号： text-overflow: ellipsis;
   * 设置弹性盒模型： display:-webkit-box;
   * 设置弹性盒子 的子元素的排列方式 ： -webkit-box-orient:vertical;
   * 显示文本的最多显示行数：-webkit-line-clamp:3;
   * 需要设置宽度
   */
   .t-ellipsis_3 {
       overflow:hidden;
       text-overflow: ellipsis;
       display:-webkit-box;
       -webkit-box-orient:vertical;
       -webkit-line-clamp:3;
       /* width: 100%; */
   }

3. flex 弹性布局
   
    

    

   display: flex;

   justify-content: flex-start;

    

    

   display: flex;

   justify-content: center;

    

    

   display: flex;

   justify-content: flex-end;

    

    

   display: flex;

   justify-content: space-between;

    

    

   display: flex;

   justify-content: space-around;

    

    

   display: flex;

   align-items: flex-start;

    

    

   display: flex;

   align-items: center;

    

    

   display: flex;

   align-items: flex-end;

   height:auto;

   height:auto;

   height:auto;

   display: flex;

   align-items: stretch;

   1

   2

   display: flex;

   align-items: baseline;

    

    

   display: flex;

   justify-content: flex-start;

   align-items: flex-start;

    

    

   display: flex;

   justify-content: center;

   align-items: center;

    

    

   display: flex;

   justify-content: center;

   align-items: flex-end;

    

    

   display: flex;

   justify-content: flex-end;

   align-items: flex-end;

    

    

   display: flex;

   justify-content: flex-end;

   align-items: center;

    

    

   display: flex;

   justify-content: space-between;

   align-items: flex-start;

    

    

   display: flex;

   justify-content: space-between;

   align-items: center;

    

    

   display: flex;

   justify-content: space-between;

   align-items: flex-end;

   flex: 1;

   flex: 2;

   flex: 1;

    

    

   display: flex;

   justify-content: space-around;

   align-items: flex-start;

    

    

   display: flex;

   justify-content: space-around;

   align-items: center;

    

    

   display: flex;

   justify-content: space-around;

   align-items: flex-end;

   flex: 1;

   width: auto;

    

    

   display: flex;

   flex-wrap: wrap;

   align-content: flex-start;

    

    

   display: flex;

   flex-wrap: wrap;

   align-content: center;

    

    

   display: flex;

   flex-wrap: wrap;

   align-content: flex-end;

    

    

   display: flex;

   flex-wrap: wrap;

   align-content: stretch;

    

    

   display: flex;

   flex-wrap: wrap;

   align-content: space-between;

    

    
   
   
   
   
   
   
   
   
   

   display: flex;

   flex-wrap: wrap;

   align-content: space-around;

   
   

       .flex { display: flex; }
       .flex-item_flex-1 { flex: 1; }
       .flex-item_flex-2 { flex: 2; }
       .flex-item_flex-a { width: auto; }
   
       .flex-justify_start { display: flex; justify-content: flex-start; }
       .flex-justify_center { display: flex; justify-content: center; }
       .flex-justify_end { display: flex; justify-content: flex-end; }
       .flex-justify_space-between { display: flex; justify-content: space-between; }
       .flex-justify_space-around { display: flex; justify-content: space-around; }
   
       .flex-align_start { display: flex; align-items: flex-start; }
       .flex-align_end { display: flex; align-items: flex-end; }
       .flex-align_center { display: flex; align-items: center; }
       .flex-align_stretch { display: flex; align-items: stretch; }
       .flex-align_baseline { display: flex; align-items: baseline; }
   
       .flex_start_start { display: flex; justify-content: flex-start; align-items: flex-start; }
       .flex_center_center { display: flex; justify-content: center; align-items: center; }
       .flex_end_end { display: flex; justify-content: flex-end; align-items: flex-end; }
       .flex_center_end { display: flex; justify-content: center; align-items: flex-end; }
       .flex_end_center { display: flex; justify-content: flex-end; align-items: center; }
       .flex_space-between_start { display: flex; justify-content: space-between; align-items: flex-start; }
       .flex_space-between_center { display: flex; justify-content: space-between; align-items: center; }
       .flex_space-between_end { display: flex; justify-content: space-between; align-items: flex-end; }
       .flex_space-around_start { display: flex; justify-content: space-around; align-items: flex-start; }
       .flex_space-around_center { display: flex; justify-content: space-around; align-items: center; }
       .flex_space-around_end { display: flex; justify-content: space-around; align-items: flex-end; }
   
       [class*=flex-align-content_] { display: flex; flex-wrap: wrap; }
       .flex-align-content_start { align-content: flex-start; }
       .flex-align-content_center { align-content: center; }
       .flex-align-content_end { align-content: flex-end; }
       .flex-align-content_stretch { align-content: stretch; }
       .flex-align-content_space-between { align-content: space-between; }
       .flex-align-content_space-around { align-content: space-around; }

4. css 动画
   

   transition: all .4s;