html - 垂直堆叠 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 元素时，我将如何从头开始？

标签： htmlcss

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>