Flex 包裹儿童答案

【问题标题】：Flex wrap childrenFlex 包裹儿童
【发布时间】：2021-05-08 16:30:09
【问题描述】：

为什么 flex wrap 在这里不起作用？我希望两个孩子都包裹在一起，但每个孩子只能自己包裹。

.hap-playlist {
  background: #ddd;
  width: 300px;
}

.hap-playlist-title-wrap div {
  display: inline-block;

}

.hap-playlist-title-wrap {
  display: flex-inline;
  flex-direction: row;
  flex-wrap: wrap;
  word-break: break-word;
  overflow-wrap: break-word;

}

<div class="hap-playlist">

  <div class="hap-playlist-title-wrap">
  
    <div class="hap-playlist-title">Orinoco Flow</div><div class="hap-playlist-artist">Enya Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in neque. Vivamus tellus. Donec magna.
    </div>
    
  </div>

</div>

我希望它是一个单独的 div。

【问题讨论】：

你的意思是display: inline-flex;？

标签： html css flexbox word-wrap

【解决方案1】：

它工作正常，我想你正在寻找这样的东西，

这完全取决于每个孩子接受的宽度和弯曲量。

.hap-playlist {
  background: #ddd;
  width: 500px;
}

.hap-playlist-title-wrap div {
  display: inline-block;

}
.hap-playlist-artist {
  flex:3;
}

.hap-playlist-title-wrap {
  display: flex;
  flex-flow: row wrap;
  width: 200px;
  word-break: break-word;
  overflow-wrap: break-word;
}

<div class="hap-playlist">

  <div class="hap-playlist-title-wrap">
  
    <div class="hap-playlist-title">Orinoco Flow</div><div class="hap-playlist-artist">Enya Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in neque. Vivamus tellus. Donec magna.
    </div>
     <div class="hap-playlist-title">Orinoco Flow</div>
 <div class="hap-playlist-title">Orinoco Flow</div>
  </div>

</div>

【讨论】：

【解决方案2】：

为什么 flex wrap 在这里不起作用？

它工作正常:)

例如，如果您的父 div 是 100px，而您的孩子是 90px 和 `30px``

这意味着30px 的第二个孩子将在90px 的孩子之下。 100px

如果您更改元素的宽度，这是一个示例

.hap-playlist {
  background: #ddd;
  width: 400px;
}

.hap-playlist-title-wrap div {
  display: inline-flex;

}

.hap-playlist-title-wrap {
  display: flex-inline;
  flex-direction: row;
  flex-wrap: wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

.hap-playlist-artist {
  width: 150px;
}

<div class="hap-playlist">

  <div class="hap-playlist-title-wrap">
  
    <div class="hap-playlist-title">Orinoco Flow</div><div class="hap-playlist-artist">Enya Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in neque. Vivamus tellus. Donec magna.
    </div>
    
  </div>

</div>

【讨论】：

我希望它可以换行，因为它是一个单一的跨度，没有定义任何宽度。