Flexboxレイアウトを簡単に実装することができるCSSライブラリを紹介します。
Flexboxレイアウトを使う機会が増えてきました。Flexboxを使うと、これまで複雑なCSSを組み合わせて実装していたレイアウトをシンプルに表現することができます。Flex Layout Attributeは、そんなFlexboxをより簡単に使えるようにしたCSSライブラリです。
まずはサンプルページをご覧ください。
使い方はとても簡単です。
<div layout="row center-center"> <div>1</div> <div>2</div> <div>3</div> </div>
Flexboxを実装したい要素にlayout="row center-center"
のような属性を指定するだけです。
使い方
ダウンロード
ソースはGithubに公開されています。ダウンロードする場合は、右側にある「Clone or download」ボタン > 「Download ZIP」ボタンからZIPファイルをダウンロードします。
ZIPファイルを展開したら、CSSフォルダに入っている「flex-layout-attribute.css」を使います。
CSS
「flex-layout-attribute.css」を読み込みます。
<link rel="stylesheet" href="css/flex-layout-attribute.css"/>
HTML
HTMLの基本形は次のようになります。
<div layout="direction vertically-horizontally reverse"> <div self="size align order display"> ... </div> </div>
layout=""
とself=""
に様々な属性値を指定します。公式サイトに使える属性値がまとめられています。
サンプルコード
サンプルページを用意しました。
横並び、天地左右中央に配置する場合は、次のようになります。
<div layout="row center-center" class="preview-box"> <div>1</div> <div>2</div> <div>3</div> </div>
縦並びのレイアウトも可能です。
<div layout="column center-center" class="preview-box"> <div>1</div> <div>2</div> <div>3</div> </div>
左右いっぱいに等間隔で配置します。
<div layout="row center-justify" class="preview-box"> <div>1</div> <div>2</div> <div>3</div> </div>
左右にスペースを残して等間隔で配置します。上下にも等間隔で配置します。
<div layout="row stretch-center" class="preview-box"> <div>1</div> <div>2</div> <div>3</div> </div>
要素全体を上部に配置します。アイテムの横幅が親要素の横幅いっぱいになるようにします。
<div layout="row top-stretch" class="preview-box"> <div>1</div> <div>2</div> <div>3</div> </div>
横並びで、アイテムを縦方向いっぱいに表示します。
<div layout="row stretch-center" class="preview-box"> <div>1</div> <div>2</div> <div>3</div> </div>
アイテムごとにサイズを指定することも可能です。
<div layout="column justify-stretch" class="preview-box"> <div>1</div> <div self="size-x1">2</div> <div>3</div> </div>
アイテムを縦横いっぱいに広げて表示します。
<div layout="row stretch-stretch" class="preview-box"> <div>1</div> <div>2</div> <div>3</div> </div>
アイテムごとにサイズを指定した、こんなレイアウトも可能です。
<div layout="row center-spread" class="preview-box"> <div>1</div> <div self="stretch">2</div> <div>3</div> <div self="stretch">4</div> <div>5</div> </div>