Flex wrap子项

Question

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

​

.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。

Answer 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>

​

Answer 2

为什么flex wrap在这里不能工作？

它工作正常:)

举个例子，如果你的父母是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>

​