如何在Flexbox单元中垂直居中放置div的内容？

Question

如何在flexbox单元格中垂直居中放置div的内容？ 谢谢！

此html和css生成以下内容：

html

<div class="container">
   <div class="cell" id="cell1">1</div>
   <div class="cell" id="cell2">2</div>
   <div class="cell" id="cell3">3</div>
</div>

css

.container {
  height:100px;
  background: blue;
  justify-content: space-evenly;
  display:flex;
  flex-direction: column;
  align-items: center;
}
.cell {
  background: purple;
  border: 1px solid red;
  color: white;
  justify-content: center;
}
#cell1 {
  flex: 2;
}
#cell2 {
  flex: 1;
}
#cell3 {
  flex: 3;
}

Here is the snip