如何在新线上创建跨度？

Question

我在div内有多个跨距,但都在同一条线上.我想在新线上写下每一个跨度.这是html代码:

.divContent {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  bottom: 5%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 2;
  opacity: .8
}

.divContent span {
  font-size: 0.875rem;
  color: #4D575D;
  margin: 0 3px;
}

<div id="content" class="divContent">
  <span>Span 1</span>
  <span>Span 2</span>
  <span>Span 3</span>
</div>

现在这段代码的结果是:Span 1 Span 2 Span 3

但我想要

跨度1

跨度2

跨度3

Answer 1

将方向更改为column:

.divContent {
  position: absolute;
  display: flex;
  flex-direction: column; /*added this */
  width: 100%;
  bottom: 5%;
  justify-content: center;
  align-items:center; /*added this if you want centring*/
  z-index: 2;
  opacity: .8
}

.divContent span {
  font-size: 0.875rem;
  color: #4D575D;
  margin: 0 3px
}

<div id="content" class="divContent">
  <span>Span 1</span>
  <span>Span 2</span>
  <span>Span 3</span>
</div>