如何使用Flexbox将第二个孩子包裹在第一个孩子周围 [英] How to wrap second child around a first child using Flexbox

问题描述

我们正在尝试使用Flexbox获得以下结果，但似乎无法使行紧贴先生。债券：

所需的输出：

解决方案

您无法使用flexbox或CSS网格（这根本不可能）。您有两个可能。

都可以使用float：

  .flex-child-1 {font-weight：粗体;向左飘浮; margin-right：5px;}  

 < div class =  flex-parent> < div class = flex-child-1>先生。 Bond< / div> < div class = flex-child-2>我们希望此文本在您名字后的同一行上继续在您的右手边，然后在您的名字下继续换行并继续该模式，直到所有< / div>< / div>  

或其他答案中所述的内联元素。

  .flex- child-1 {font-weight：粗体; margin-right：5px;}。flex-child-1，.flex-child-2 {display：inline;}  

 < div class = flex-parent> < div class = flex-child-1>先生。 Bond< / div> < div class = flex-child-2>我们希望此文本在您名字后的同一行上继续在您的右手边，然后在您的名字下继续换行并继续该模式，直到所有< / div>< / div>  

< hr>

或者您可以使用flexbox结构对其进行破解，但这并不意味着您可以使用flexbox进行操作

  .flex-parent {display：flex; flex-direction：行； align-items：Stretch;}。flex-child-1 {font-weight：bold;宽度：0; white-space：nowrap;}。flex-child-2 {text-indent：80px;}  

 < div class = flex-parent> < div class = flex-child-1>先生。 Bond< / div> < div class = flex-child-2>我们希望此文本在您名字后的同一行上继续在您的右手边，然后在您的名字下继续换行并继续该模式，直到所有< / div>< / div>  

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

解决方案

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>

这篇关于如何使用Flexbox将第二个孩子包裹在第一个孩子周围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！