2017-11-18 126 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>