相对定位的内容不垂直堆叠？答案

【问题标题】：Relatively positioned content not stacking vertically?相对定位的内容不垂直堆叠？
【发布时间】：2017-06-06 02:49:08
【问题描述】：

我正在尝试将这些元素堆叠起来，使它们彼此叠放，但它们最终会横向挤压。我做错了什么？

HTML：

    .content-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      height:100%;
      width:100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .content-box {
      background-color: #f2f2f2;
      padding: 5vh 5vw;
      font-family: "Roboto";
      color: #676767;
      text-align: center;
      max-width: 60vw;
      position: relative;
      z-index:10;
      margin: 1vh
    }

<div class="content-wrapper">
        <div class="content-box">
            <span class="title"> Stats </span>
            <br>
            <div class="sep"></div>
            <p> Lorem ipsum 1 </p>
        </div>
    
        <div class="content-box">
            <span class="title"> Stats </span>
            <br>
            <div class="sep"></div>
            <p> Lorem ipsum 2 </p>
        </div>
    </div>

【问题讨论】：

“我正在尝试堆叠这些元素，使它们彼此叠放，”？ Dint让你......

标签： html css flexbox

【解决方案1】：

改用弹性盒子。 flex direction

.box-list {
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.box {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  background-color: #ccc;
  
  margin-bottom: 10px;
}

<section class="box-list">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</section>

【讨论】：

【解决方案2】：

将flex-direction: column; 添加到包装器中：

.content-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      height:100%;
      width:100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .content-box {
      background-color: #f2f2f2;
      padding: 5vh 5vw;
      font-family: "Roboto";
      color: #676767;
      text-align: center;
      max-width: 60vw;
      position: relative;
      z-index:10;
      margin: 1vh
    }

<div class="content-wrapper">
        <div class="content-box">
            <span class="title"> Stats </span>
            <br>
            <div class="sep"></div>
            <p> Lorem ipsum 1 </p>
        </div>
    
        <div class="content-box">
            <span class="title"> Stats </span>
            <br>
            <div class="sep"></div>
            <p> Lorem ipsum 2 </p>
        </div>
    </div>

【讨论】：