2017-11-18 127 views
1

我试图解决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>

See it on CodePen

+0

你只想要第二列到悬停成长? – Kushtrim

+0

说我有6个盒子的div(每行3行2列),我把第二个div悬停,我想第二个div扩大,div 1&3缩小,而div 4-6保持不变。 – yayheartbeat

+0

这或多或少是不可能的,主要是因为你需要检测哪个行是histed元素,然后只在该行上增长/缩小元素,并且_previous sibling_没有选择器。 – LGSon

回答

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>

0

我一定要包中的每一行单独的容器或者是有没有办法解决此问题的方法?

您需要将每行包装在单独的容器中。

由于包装已启用,因此无法使用弹性盒进行布局。

这意味着单行中的项不能被展开,同时收缩其同胞而不触发包装。 当他们可以包装时,没有什么可以迫使兄弟姐妹缩小。

没有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>