我试图解决一个flexbox问题，我希望每行有三个div，首先大小相等，但是当悬停div时，那个会增长，而同一行上的其他内容会缩小。以为我已经解决了它，直到我尝试了多行。
我想要的是当悬停第三个div时，它会缩小第一个和第二个div，并保持其余部分不变。我无法理解这一部分。
以下是我的单行工作解决方案。
此布局是否也适用于多行？
我是否必须将每一行包装在一个单独的容器中，或者有办法解决这个问题吗？
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.box {
width: 33%;
flex: 1;
}
.box:hover {
flex-grow: 3;
}<div class="container">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>
</div>
答案 0 :(得分：0)
我尽力让它们在同一个容器中对齐，但它们似乎并不适合那里。最好将它们放在不同的容器中。
通过这种方式，它们看起来会很好，如果你需要单独申请，你可以做一些简单的造型。
以下是Fiddle
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: space-between;
}
.box {
width: 30%;
flex: 1 1 2%;
transition: all 0.3s ease-in-out;
}
.box:hover {
flex-grow: 2;
}<div class="container">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>
</div>
<div class="container">
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>
</div>
答案 1 :(得分：0)
我是否必须将每一行包装在一个单独的容器中，或者有办法解决这个问题吗？
您需要将每一行包装在一个单独的容器中。
使用flexbox无法进行布局，因为包装已启用。
这意味着单个行中的项目在缩小其兄弟节点而不触发换行时无法扩展。 没有什么可以强迫兄弟姐妹收缩，只要他们可以包裹。
没有flex-wrap: wrap行长度有一个硬限制。然后，您可以在悬停时给出任何大的项目（在我的示例中使用flex-basis: 100%），它可以在缩小其兄弟姐妹的同时进行扩展，而不会出现任何包装问题。
.container {
display: flex;
}
.box {
flex-basis: 33.33%;
}
.box:hover {
flex-basis: 100%;
}
/* for demo only */
.box {
transition: .5s;
border: 1px dashed red;
box-sizing: border-box;
}<div class="container">
<p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut la bore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
<p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
<p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>
<div class="container">
<p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut la bore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
<p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
<p class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. </p>
</div>