CODEWITHSUNDEEP
htmlcssflexbox
Allen Shaw
Allen Shaw

Reputation: 1492

How to wrap content of flexbox in row layout?

I have a multiple line sentence to display. It consists of several parts.

I use flex layout like the following code:

.container {
  width: 200px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 1px solid red;
}
<div class="container">
  <div>1. </div>
  <div>A long sentance which will take multiple lines.</div>
  <div>(another sentence)</div>
</div>

But it's not what I expected. I want the sentence displayed like this:

1. A long sentance which will 
take multiple lines.(another 
sentence)

How can I get this result?

Upvotes: 0

Views: 175

Answers (2)

Saksham
Saksham

Reputation: 9380

Simply replace you div with a span and get rid of the flexbox related styles

<div class="container">
  <span>1. </span>
  <span>A long sentence which will take multiple lines.</span>
  <span>(another sentence)</span>
</div>

If you plan to have some paddings applied, set the display to inline-block

Upvotes: 1

Evren
Evren

Reputation: 4410

Flex-wrap would not work with this way because your second div has already bigger width size than 100% of your container div so it pushs second div in second line.

Upvotes: 1

Related Questions