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

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

Flexbox outdatedbrowser.com style UI

デモはモダンブラウザでご覧ください、IEは10+で。

デモ

各カラムをホバーすると、そのカラムの領域がアニメーションで広くなります。

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 {
  color: #fff;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
}

li {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -webkit-transition: -webkit-box-flex 500ms ease-out;
  -webkit-transition: -webkit-flex 500ms ease-out;
  transition: -webkit-box-flex 500ms ease-out;
  transition: -ms-flex 500ms ease-out;
  transition: flex 500ms ease-out;
  padding: 20px;
}

li:hover {
   -webkit-box-flex: 3;
   -webkit-flex: 3;
   -ms-flex: 3;
   flex: 3;
}