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%;
}