需求：多個div從下往上布局 ，div垂直居中
任何一個容器可以指定為flex布局，但是td和th等標簽本身已有布局，所以重寫display屬性會使元素失去原有的布局特性
*{
display:flex
}
任何一個被設置為彈性布局的容器會有兩條抽象的軸，彈性布局的容器的有以下屬性
- flex-direction 決定項目主軸的排列方向
- row 主軸方向從左到右排列,主軸為橫向軸
- row-reverse 主軸方向從右到左排列
- column 主軸為縱向縱
- column-reverse 交叉軸上從下往上排列
flex-wrap 所有項目如何被包裹
- nowarp 不換行（列），項目的寬高會變化
- wrap 換行（列），溢出會順序換行
- wrap-reverse 反向排列
- flex-flow flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap
- justify-content justify-content屬性定義了項目在主軸上的對齊方式。
- flex-start（默認值）：左對齊
- flex-end：右對齊
- center： 居中
- space-between：兩端對齊，項目之間的間隔都相等。
- space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。
- align-items align-items屬性定義項目在交叉軸上如何對齊
- flex-start：交叉軸的起點對齊。
- flex-end：交叉軸的終點對齊。
- center：交叉軸的中點對齊。
- baseline: 項目的第一行文字的基線對齊。
- stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。
- align-content align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
- flex-start：與交叉軸的起點對齊。
- flex-end：與交叉軸的終點對齊。
- center：與交叉軸的中點對齊。
- space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
- space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
- stretch（默認值）：軸線占滿整個交叉軸。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ width:500px; height:500px; border: 1px solid #0e90d2; display: flex; flex-direction:row-reverse; } .box{ width:200px; height:200px; background:#bbbbbb; } </style> </head> <body> <div class="container"> <div class="box"> 1 </div> <div class="box"> 2 </div> <div class="box"> 3 </div> <div class="box"> 4 </div> <div class="box"> 5 </div> </div> </body> </html>