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