CSS-使用Flexbox，垂直置中float元素

目標效果

讓兩個浮動元素，可以垂直對齊

原始情況

放置兩個浮動元素，它們各自都向上靠其所在的容器

<div class="box1">box1</div>
<div class="box2">box2</div>

.margin{
  margin-top:50px;
}
.box1{
  width:200px;
  background: #F0780D;
  height:100px;
  float:left;
}
.box2{
  width:300px;
  background: #F0C7B2;
  height:50px;
  float:right;
}

作法

在外層容器中，使用display: flex，並且置中

.container{
  margin-top:50px;
  display: flex;
  align-items: center;
}

垂直對齊vertical-align: middle無效

在css官方文件中說明：“vertical-align屬性，僅能使用於inline 或 table-cell box”，所以flaot元素無法使用此方法

<div class="container">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</div>

.container{
  vertical-align: middle;
}