CODEWITHSUNDEEP
cssflexbox
Wonka
Wonka

Reputation: 8674

How to wrap second child around a first child using Flexbox

We're trying to get the following result using Flexbox, but cannot seem to get the line on the right to wrap around Mr. Bond:

Desired output:

enter image description here

.flex-parent {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.flex-child-1 {
  font-weight: bold;
}

.flex-child-2 {}
<div class="flex-parent">
  <div class="flex-child-1">Mr. Bond</div>
  <div class="flex-child-2">We would like for this text to continue on your right hand side on the same line after your name, then continue to a new line under your name and continue the pattern until all the text is done.</div>
</div>

Any idea how to accomplish the desired result using Flexbox layout?

Here is the fiddle

Upvotes: 1

Views: 1010

Answers (2)

Temani Afif
Temani Afif

Reputation: 272901

You cannot do this using flexbox or CSS grid (it's simply impossible). You have two possibilies.

Either using float:

.flex-child-1 {
  font-weight: bold;
  float:left;
  margin-right:5px;
}
<div class="flex-parent">
  <div class="flex-child-1">Mr. Bond</div>
  <div class="flex-child-2">We would like for this text to continue on your right hand side on the same line after your name, then continue to a new line under your name and continue the pattern until all the text is done.</div>
</div>

Or inline elements like stated in the other answer.

.flex-child-1 {
  font-weight: bold;
  margin-right:5px;
}
.flex-child-1,
.flex-child-2 {
  display:inline;
}
<div class="flex-parent">
  <div class="flex-child-1">Mr. Bond</div>
  <div class="flex-child-2">We would like for this text to continue on your right hand side on the same line after your name, then continue to a new line under your name and continue the pattern until all the text is done.</div>
</div>

Or you hack it with your flexbox structure but it doesn't mean you can do it with flexbox

.flex-parent {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.flex-child-1 {
  font-weight: bold;
  width:0;
  white-space:nowrap;
}

.flex-child-2 {
  text-indent:80px;
}
<div class="flex-parent">
  <div class="flex-child-1">Mr. Bond</div>
  <div class="flex-child-2">We would like for this text to continue on your right hand side on the same line after your name, then continue to a new line under your name and continue the pattern until all the text is done.</div>
</div>

Upvotes: 2

khan
khan

Reputation: 1464

If not using CSS is okay, you can use this solution utilizing <b> tags. It makes use of inline elements.

<div>
  <p><b>Mr. Bond</b> We would like for this text to continue on your right hand side on the same line after your name, then continue to a new line under your name and continue the pattern until all the text is done.</p>
</div>

Upvotes: 3

Related Questions