Как создать span на новой строке?

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>

Теперь результат этого кода: Пролет 1 Пролет 2 Пролет 3

Но я хочу

Размах 1

Размах 2

Размах 3

Answer 1

Добавление тега перерыва также работает !!!

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

Answer 2

Другой способ flexbox включает в себя flex-wrap: wrap и flex-basis со значением на ваш выбор (пояснение ниже):

.divContent {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap; /* enables wrapping of flex-items (default: "nowrap") */
  width: 100%;
  bottom: 5%;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 2;
  opacity: .8;
}

.divContent span {
  flex-basis: calc(50% - 5.99px); /* initial width; needs to be at least 50.01% to make it work (if there are no left/right margins), else "calc(50% - 5.99px)" is enough in this case (- 2 * 3px left/right margin = - 6px, so a little bit more to push the others and force them to wrap) */
  flex-basis: 100%; /* but for simplicity's sake just make it 100% so they take full parent's width */
  text-align: center; /* added */
  font-size: 0.875rem;
  color: #4D575D;
  margin: 0;
  margin: 0 3px;
}

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

Answer 3

Просто добавьте отображение: блок; в пролете

.divContent {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  flex-direction: column;
  display: flex;
  width: 100%;
  bottom: 5%;
  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 4

Вы можете достичь желаемого эффекта, используя свойство display, которое вы определили в классе .divContent в своей таблице стилей.

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

Answer 5

Измените направление на 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>