公用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类

 .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:; /*显示行数*/
   }

   .str_ellpsis_3 {
     -webkit-line-clamp:; /*显示行数*/
   }

   .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