Flexbox布局下无法将Div内文本移动到3个div盒容器上方15px位置

你的代码存在几个flex布局属性使用错误和元素display类型的问题，导致间距无法生效，修改方法如下：

问题根源 #

1. #location-section 未设置display: flex，你写的justify-content属性不会生效
2. 你把flex-direction和flex-wrap属性搞混了：flex-wrap控制是否换行，取值为wrap/nowrap；控制排列方向的是flex-direction，取值为row/column
3. .content-center设置了display: inline，行内元素的上下margin不会生效，所以没法设置和下方容器的间距

修改后的CSS代码 #

#location-section {
  background-color: black;
  height: 500px;
  /* 新增：设置为flex垂直排列，内容水平居中 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#location-section .content-center {
  /* 把display从inline改成block，才能正常设置上下边距 */
  display: block;
  background-color: green;
  /* 新增：和下方地址容器间距15px */
  margin-bottom: 15px;
}

#location-section .content-center h2 {
  text-align: center;
  color: seashell;
  background-color: red;
  /* 可选：去掉h2默认的上下边距，避免间距叠加 */
  margin: 0;
}

#location-section .location-container {
  display: flex;
  /* 把错误的flex-wrap改成flex-direction，水平排列三个地址盒 */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: blue;
  margin: 0;
  min-height:200px;
  overflow:hidden;
  width: 100%;
  max-width: 980px; /* 可选，限制地址容器最大宽度，避免太宽 */
}

#location-section .location-container1 {
  background-color: red;
  border: 2px solid white;
  width: 300px;
  align-items: center;
  height: 200px;
  max-width: calc((100% / 3) - 40px);
  margin-left: 20px;
}

#location-section .location-container2 {
  background-color: red;
  border: 2px solid white;
  width: 300px;
  align-items: center;
  height: 200px;
  max-width: calc((100% / 3) - 40px);
}

#location-section .location-container3 {
  background-color: red;
  border: 2px solid white;
  width: 300px;
  align-items: center;
  height: 200px;
  max-width: calc((100% / 3) - 40px);
  margin-right: 20px;
}

h4 {
  text-align: center;
}

HTML代码注意事项 #

你原HTML里的#location-section外层套了多余的<pre>标签，记得删掉，只保留下面的结构即可：

<div id="location-section">
  <div class="content-center">
    <h2>Locations</h2>
  </div>
  <div class="location-container">
    <div class="location-container1">
      <h4>
        Address 1
      </h4>
    </div>
    <div class="location-container2">
      <h4>
        Address2
      </h4>
    </div>
    <div class="location-container3">
      <h4>
        Address3
      </h4>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者Andrea