[CSS]簡単な記述でアコーディオンコンテンツを実装するフレキシブルボックスを使ったテクニック

2番目にホバーすると、2番目が広くなります 実装のヒントになったのは「Outdated Browser」のメインUIで、このflexboxを使ったUIだけでなく他にも面白い仕掛けが施されています。 Outdated Browser 実装はこんな感じです。 HTML HTMLは非常にシンプルで、各カラムはリスト要素で実装しています。 <ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> CSS CSSも非常にシンプル、「display: flex;」で各カラムを設定し、通常時に「flex: 1;」、ホバー時に「flex: 3;」になるようにします。 ※flexboxのブラウザのサポート状況 下記のコードは、各カラムにカラーを設定するだけでそのままコピペで使えます。 body { colo

[poppun1940]

リスト要素で実装した複数のカラムを水平に配置し、各カラムをホバーすると滑らかなアニメーションで伸縮させるflexboxを使ったスタイルシートのテクニックを紹介します。 Flexbox outdatedbrowser.com style UI デモはモダンブラ

[nors]

http://codepen.io/dp_lewis/details/sDwlz

[peketamin]

wantedlyモバイル版の半開きアコーディオンはよく出来てると思う

[kana321]

リスト要素で実装した複数のカラムを水平に配置し、各カラムをホバーすると滑らかなアニメーションで伸縮させるflexboxを使ったスタイルシートのテクニックを紹介します。

[s99e209]

見栄えのいい縦カラムメニュー。ホバーしたときのアニメーションもキレイでちょっとテンションが上がる感じ。

[qrac_jp]

滑らかでよくできてる！