How to create span on new line?

Question

I have multiple spans inside of a div but all are at same line. I want to write every span on new line. Here is the html code:

.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>

Now the result of this code is: Span 1 Span 2 Span 3

But I want

Span 1

Span 2

Span 3

Answer 1

Change the direction to 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>

Answer 2

You can achieve the desired effect using the display propery that you've defined in .divContent class in your stylesheet.

.divContent {
  position: absolute;
  display: grid; /* changed here */
  /* YOU CAN ALSO USE inline-grid HERE */
  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>