CSS Flexboxとは、CSSによるレイアウトの代表的な手法の1つで、CSS Flexboxを使用することによって、完結なコードで柔軟にレイアウトを組むことができるようになります。
普段CSSフレームワークを使用している人も多いと思いますが、それらのCSSフレームワークでFlexboxが使えるのはご存知ですか？
今回は、Flexboxに特化したCSSフレームワークと、Flexboxを使用できる汎用的なCSSフレームワークをそれぞれご紹介したいと思います。
CSSフレームワークの種類
それぞれ、ご紹介するCSSフレームワークは下記の通りです。
- Flexboxに特化した軽量CSSフレームワーク
-
- Flexy
- Flexit
- Flexboxが使える汎用的なCSSフレームワーク
-
- Bootstrap
- Bulma
- Foundation
- Pure.css
- Spectre
- Basis
では、1つ1つのCSSフレームワークを詳しくご紹介していきます。
Flexy
Flexyは、Flexboxに特化したCSSフレームワークです。特徴は「たった0.33KB」という超軽量フレームワークである点。
このように、クラス名を指定するだけでFlexboxを使ったグリッドレイアウトが作れてしまいます。
|
1 2 3 4 5 |
<div class="main"> <div class="dp33">33,3%</div> <div class="dp33">33,3%</div> <div class="dp33">33,3%</div> </div> |
また、下記のようにすべてのボックスの幅を指定するのではなく、クラス名にfluidと指定することによって自動で幅を調整することもできます。
|
1 2 3 4 5 6 |
<div class="main"> <div class="dp25">25%</div> <div class="fluid">Fluid</div> <div class="dp17">17%</div> <div class="clear"></div> /* => Use clear when you have fluid column */ </div> |
「余計な機能は不要だけど、FlexboxのためだけにCSSフレームワークを導入する」という場合にはFlexyがとてもおすすめです。
Flexit
FlexitはFlexboxに特化した軽量のCSSフレームワークで、ファイルサイズはたった1.5KBです。
下記のようなシンプルなコードでFlexboxを簡単に使用することができます。Flexyよりも少しファイルサイズは大きいですが、細かなカスタマイズや調整はFlexitの方が行いやすいですね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="container"> <section class="row"> <div class="one column"> <p>content</p> </div> <div class="five columns"> <p>content</p> </div> <div class="six columns"> <p>content</p> </div> </section> </div> |
出力結果は下記のようになります。
Bootstrap
Bootstrapはもう説明する必要はありませんね。世界で最も有名なCSSフレームワークの1つです。
BootstrapでFlexboxを使用する場合は、コンテナのクラス名にd-flexを指定します。
|
1 2 3 4 5 |
<div class="d-flex"> <div class="col-3">Flex item 1</div> <div class="col-4">Flex item 2</div> <div class="col-5">Flex item 3</div> </div> |
Bulma
Bulmaは最近人気が高まってきているFlexbox対応のCSSフレームワークです。
Bulmaの場合は、基本的にすべてのレイアウトをFlexboxで行っているため、特別に意識せずともFlexboxでレイアウトを作っていくことができます。
|
1 2 3 4 5 6 7 |
<div class="columns"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> <div class="column">4</div> <div class="column">5</div> </div> |
上記のコードで、下記のような横並びのレイアウトを作成することができます。
Foundation
Foundationは、Bootstrapには劣りますが肩を並べる有名なCSSフレームワークです。
ただし、デフォルト状態ではFlexboxが無効になっているため、Flexboxを使用する場合はfoundation-flex.cssをダウンロードして使用するようにしてください。
下記のように記述すると、Flexboxでレイアウトすることができます。
|
1 2 3 4 5 6 7 8 |
<div class="row"> <div class="columns small-6">6 columns</div> <div class="columns small-6">6 columns</div> </div> <div class="row"> <div class="columns medium-6 large-4">12/6/4 columns</div> <div class="columns medium-6 large-8">12/6/8 columns</div> </div> |
Pure
Yahoo!が提供するCSSフレームワークで、ファイルが軽量ということで人気のフレームワークです。なんとサイズは「3.8kb」という超軽量。（gzip圧縮＋コード圧縮時）
Flexboxでレイアウトする場合には、下記のように記述します。
|
1 2 3 4 5 |
<div class="pure-g"> <div class="pure-u-1-3"><p>Thirds</p></div> <div class="pure-u-1-3"><p>Thirds</p></div> <div class="pure-u-1-3"><p>Thirds</p></div> </div> |
Butter Cake
Butter Cakeは、FlexboxをベースにしたCSSフレームワークです。
Bootstrapよりも軽量で、Bootstrapの場合はファイルサイズが137KBですが、Butter Cakeの場合は42KBで済みます。
また、シンプルなコードで済むという特徴があり、例えばBootstrapでナビゲーションメニューを作成すると下記のようなコードになりますが、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<nav class="navbar navbar-expand-md navbar-dark bg-dark"> <div class="container"> <!-- BRAND --> <a class="navbar-brand" href="#">Navbar</a> <!-- TOGGLER --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <!-- MENU --> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> </ul> </div> </div> </nav> |
Butter Cakeの場合は下記のようになります。Bootstrapに比べてシンプルなコードで済んでいることが分かりますね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!-- NAVBAR --> <nav class="navbar expand-md default-nav bg-primary"> <div class="container-fluid"> <!-- LOGO --> <div class="brand"> <a href="#!">Logo</a> </div> <!-- NAVBAR --> <div class="menu-box" id="mainNav1"> <!-- CLOSE BUTTON | MOBILE--> <div class="menu-close"><i class="fa fa-close"></i></div> <!-- MENU --> <ul class="menu ml-auto"> <li><a href="#!">link 1</a></li> <li><a href="#!">link 2</a></li> </ul> </div> <!-- TOGGLER | MOBILE --> <button class="toggler bg-secondary text-white" data-nav="#mainNav1"><i class="fa fa-bars"></i></button> </div> </nav> |
Basis
BasisはFlexboxをベースとしたCSSフレームワークです。下記のように記述するとFlexboxを使ってレイアウトを組むことができます。
|
1 2 3 4 5 |
<div class="_c-row"> <div class="_c-row__col _c-row__col--1-3">1/3</div> <div class="_c-row__col _c-row__col--1-3">1/3</div> <div class="_c-row__col _c-row__col--1-3">1/3</div> </div> |
その他のコンポーネントも公式サイトで色々と紹介されているので、気になる方はチェックしてみてください。
Spectre
Spectreは、10KB以下の軽量のCSSフレームワークです。軽量ながらも、レイアウトだけでなくコンポーネントも多数用意されていて、コードも比較的シンプルで扱いやすいという特徴があります。
Flexboxでレイアウトを作成する場合は、下記のようなコードになります。
|
1 2 3 4 5 6 7 8 |
<div class="container"> <div class="columns"> <div class="column col-6">col-6</div> <div class="column col-3">col-3</div> <div class="column col-2">col-2</div> <div class="column col-1">col-1</div> </div> </div> |
まとめ
Flexboxは、要素を横並びにしたり柔軟にレイアウトを作成したい場合にはとても役立つCSSのレイアウト手法です。
最近では、ベンダープレフィックスさえ記述しておけばブラウザ対応もほとんど気にする必要がなくなってきたので、商用のWebサイトでも気にせず利用できるようになってきました。
簡単にFlexboxを導入したい場合は、FlexyやFlexitなどのFlexbox特化型のCSSフレームワークを使うと気軽に使用することができますね。
ぜひ、WebコーディングにFlexboxが利用できるCSSフレームワークを取り入れてみてください。
