css - 使包裹的项目像列一样垂直对齐？

Question

我有一个容器和包装物品：

https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/ZEJGjEK

 <div class="cont">
  <div class="item">Item 1 sf</div>
  <div class="item">Item 2 sdfgdf</div>
  <div class="item">Item 3 fdgsg</div>
  <div class="item">Item 4 sdfgsfdgfsdg</div>
  <div class="item">Item 5 xfgfsd</div>
  <div class="item">Item 6 sfdgsdfgd</div>
  <div class="item">Item 7 sdfgdfsg</div>
  <div class="item">Item 8 wrsdffd</div>
</div>
.cont {
  display: flex;
  flex-wrap: wrap;
  background: grey;
}
.item {
  border: 1px solid red;
  background: blue;
  white-space: nowrap;
  color: white;
  padding: 20px;
}

我需要将包装的项目垂直对齐，就像它们在列中一样：

鉴于我不知道物品或容器的宽度，我该怎么做？我可以让它们根据可用宽度包装但彼此垂直对齐吗？

标签： css