How to create span on new line?

user_5594906 0
Viewed 225

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

flexbox css html
5 Answers

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>

user_86203330

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>

user_61249090

Another flexbox way of doing it includes flex-wrap: wrap and flex-basis with the value of your choice (explanation below):

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

user_28516320

Adding an break tag also work!!! 

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

Just add display: block; in span

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

user_56944690
Related