これは便利!Flexboxレイアウトを簡単に実装することができるCSSライブラリ「Flex Layout Attribute」

Flexboxレイアウトを簡単に実装することができるCSSライブラリを紹介します。

これは便利!Flexboxレイアウトを簡単に実装することができるCSSライブラリ「Flex Layout Attribute」
Flex Layout Attribute

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>

Flexboxの人気記事

Flexboxを使ったコードスニペット集 Flexbox Patterns
Flexboxを使ったコードスニペット集 Flexbox Patterns

人気の記事

2017年、人気の無料WordPressテーマ100選
2017年、人気の無料WordPressテーマ100選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

コメント

  • Posted on
  • Updated on
  • Views 1,042