vertical-align，dispaly:table-cell | table | flex

1、vertical-align

       定義：設置元素(img,input這種類型的元素) 或者元素下面的文本元素(div，span。。。)的垂直對齊方式。 可是 其 只對 一些特定顯示樣式（例如 單元格顯示方式：table-cell）的元素 或者  img等元素   纔會起做用

 2、dispaly:table-cell

   （1）不和 dispaly:table 配套使用

       這種用法中 用百分來設置 元素的 高寬 不起做用（例如：width:100%）,只能是 具體像素

    （2）和 dispaly:table 配套使用

       這種用法能夠用百分比來設置元素高寬，並且在當前狀況，相似如 table,tr,tr元素相似,高寬會自動根據 父元素鋪滿高寬

 3、vertical-align 和  dispaly:table-cell 的配套使用

        

//css
#wrapper {
  height:200px;
  width:200px;
}

#cell {
    display: table-cell;
    vertical-align: bottom;
    width:100px;
    height:100px;
    background:red;
    text-align:center;
}

//html
<div id="wrapper">  
     <div id="cell">
        <div class="content">Co</div >
     </div>
</div>

   

4、dispaly:flex 

    （1）Flex彈性佈局，用來爲盒狀模型提供最大的靈活性。元素設爲Flex佈局之後，子元素的float、clear和vertical-align屬性將失效。

    （2）配套屬性

flex-direction:row | row-reverse | column | column-reverse
   //row:(默認)沿水平主軸由左向右排列;row-reverse沿水平主軸由右向左排列;column沿垂直主軸 上到下和column-reverse 下到上。
              
flex-wrap:flex-wrap: nowrap | wrap | wrap-reverse;　
   //屬性可選值的範圍爲nowrap(默認)不換行、wrap換行（第一行在上方）和 wrap-reverse:第一行在下方

justify-content:flex-start | flex-end | center | space-between | space-around;  //水平方向 ！
   // flex-start：在主軸上由左或者上開始排列;flex-end：在主軸上由右或者下開始排列;center：在主軸上居中排
      列;space-between：在主軸上左右兩端或者上下兩端開始排列;space-around：每一個項目兩側的間隔相等。因此，項目之間
      的間隔比項目與邊框的間隔大一倍。

align-items:flex-start | flex-end | center | baseline  | stretch; //垂直方向
    //flex-start:頭部起始 flex-end：底部起始  center：居中 baseline：main axis居中 stretch：頭尾鋪滿

align-content:flex-start | flex-end | center | space-between | space-around | stretch;　　
    //定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

 用法：

>.col{
   word-wrap:break-word;
   word-break:break-all;
   padding:0 5px;
   height:4.6vh;
   display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
}