垂直堆叠div框的问题

Question

我有以下代码：

.blueleft {
    background-color: white;
    width: 300px;
    border: 25px #cee2e8;
    padding: 25px;
    margin: 40px;
    float: left;
    font-family: "berlin sans fb";
    color: gray; 
    font-size: 20px;
    text-align: center;
    vertical-align:middle;
}

.blueright{
    background-color: white;
    width: 300px;
    border: 25px #cee2e8;
    padding: 25px;
    margin: 40px;
    float: right;
    font-family: "berlin sans fb";
    color: gray; 
    font-size: 20px;
    text-align: center;
    vertical-align:middle;
}

但是我仍然像这样水平放置框元素：

我不确定该怎么做才能确保div框垂直堆叠，如果需要，仍然能够水平格式化和居中对齐。我一直在环顾四周，但一直找不到可以放入html文档中的代码...。在CSS中格式化DIV元素时，我将如何从头开始？

Answer 1

这是一个Flexbox的简单示例：

.flex-container {
  display: flex;
  flex-direction: column;
  background-color: DodgerBlue;
  height: 400px;
  align-items: center;
  justify-content: center;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>