公用flex类

开发过程中，很多布局，用antd的栅格还是不灵活，flex弹性布局会更好用

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

 

 

 

 

容器属性 

1. flex-direction  排列方向
2. flex-wrap  排不下，如何换行
3. flex-flow  1和2的简写
4. justify-content  主轴对齐
5. align-item 交叉轴对齐
6. align-content 多轴线对齐

项目属性

1. order  数值越小，越靠前
2. flex-grow  项目放大
3. flex-shrink  项目缩小
4. flex-basis   定宽或定高（同事说他面试都会问一个问题，两列，一列定宽，但是不能用width定义，另一列自适应，怎么写，就用这个属性）
5. flex  2/3/4的简写
6. align-self 单个项目与其他项目不一样的排列方式，下次写代码可以试试这个

 

 

 

 以下为拿来即用公用flex类

.display_none {
    display: none !important;
  }
  
  .visibility_hidden {
    visibility: hidden;
  }
  /* 交叉轴左对齐 */
  .flex_top {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: flex-start;
    -ms-align-items: flex-start;
    align-items: flex-start;
  }
  /* 水平居中 */
  .center {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
  }
  /* 垂直居中 */
  .col_middle {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* 主轴垂直水平居中 */
  .col_center_middle {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    align-items: center;
  }
  /* 主轴水平垂直居中 */
  .center_middle {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex !important;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
  }
  
  .space_between {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
  }
  
  .space_around {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
    justify-content: space-around;
  }
  
  .right {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end !important;
    -ms-justify-content: flex-end !important;
    justify-content: flex-end !important;
  }
  
  .cursor_pointer {
    cursor: pointer;
  }
  
  .common_shadow {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.07);
  }
  
  .str_ellipsis{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .str_ellpsis_2, .str_ellpsis_3 {
    display: -webkit-box;
    -webkit-box-orient: vertical!important;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .str_ellpsis_2 {
    -webkit-line-clamp: 2; /*显示行数*/
  }
  
  .str_ellpsis_3 {
    -webkit-line-clamp: 3; /*显示行数*/
  }
  
  .middle {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex!important;
    -webkit-align-items: center;
    -ms-align-items: center;
    align-items: center;
  }

　　

阮一峰  Flex 布局教程：语法篇

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

来源：https://www.cnblogs.com/rong88/p/11752686.html