CSS Flexbox 实现 div 块垂直排列：完整示例和解释

.container {
  display: flex;
  flex-direction: column;
}

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin-bottom: 10px;
}

在上述代码中，我们将外层的容器 div 设置为 display: flex;，并使用 flex-direction: column; 将其子元素从上到下排列。每个内部的 div 块都具有相同的宽度、高度和底部外边距，以实现垂直布局。