[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;
}

sponsors

top of page

©2018 coliss