1
私はサイズが最初等しい行ごとに3つのdivを、持っていたいフレキシボックスの問題を解決しようとしているが、div要素をホバリングするとき、1つは成長し、他のもの同じ行に収縮する。私はそれを複数の行にわたって試してみるまで、私はそれを解決したと思った。私が欲しいもの兄弟縮小し、フレックス項目がホバーに拡大してください
は、第三のdivをホバリングするとき、それは第一および第二のdivを縮小し、そのまま残りの部分を残しています。私はその部分を理解することはできません。
以下は、私の1列作業ソリューションです。
このレイアウトは複数の行にも適用できますか？
各行を別のコンテナにラップする必要がありますか、これを解決する方法はありますか？
.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>
は、あなただけの2番目の列はホバー上に成長したいですか？ – Kushtrim
6つのボックスdiv（3行2列）を持っていて、2番目のdivに移動し、2番目のdivを展開し、div 1と3を縮小し、4〜6をdivsに変更しないでください。 – yayheartbeat
これは多かれ少なかれ可能ですが、主に必要なのは、ホバリングされた要素がどの行かを検出し、その行の要素を拡大/縮小するだけで、_previous sibling_のセレクタはありません。 – LGSon