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:

.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

回答1:

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>

回答2:

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>

来源：https://stackoverflow.com/questions/61112625/how-to-wrap-second-child-around-a-first-child-using-flexbox

标签

css

flexbox