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

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

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

Flexboxレイアウトを使う機会が増えてきました。Flexboxを使うと、これまで複雑なCSSを組み合わせて実装していたレイアウトをシンプルに表現することができます。Flex Layout Attributeは、そんなFlexboxをより簡単に使えるようにしたCSSライブラリです。

まずはサンプルページをご覧ください。

使い方はとても簡単です。

Flexboxを実装したい要素にlayout="row center-center"のような属性を指定するだけです。

スポンサーリンク

使い方

ダウンロード

ソースはGithubに公開されています。ダウンロードする場合は、右側にある「Clone or download」ボタン > 「Download ZIP」ボタンからZIPファイルをダウンロードします。

ダウンロード

ZIPファイルを展開したら、CSSフォルダに入っている「flex-layout-attribute.css」を使います。

CSS

「flex-layout-attribute.css」を読み込みます。

HTML

HTMLの基本形は次のようになります。

layout=""self=""に様々な属性値を指定します。公式サイトに使える属性値がまとめられています。

サンプルコード

サンプルページを用意しました。

横並び、天地左右中央に配置する場合は、次のようになります。

天地左右中央に配置

 

縦並びのレイアウトも可能です。

縦並びのレイアウト

 

左右いっぱいに等間隔で配置します。

左右いっぱいに均等割り付けで配置

 

左右にスペースを残して等間隔で配置します。上下にも等間隔で配置します。

左右にスペースを開けて等間隔で配置します。上下にも等間隔で配置します。

 

要素全体を上部に配置します。アイテムの横幅が親要素の横幅いっぱいになるようにします。

要素全体を上部に配置します。アイテムの横幅が親要素の横幅いっぱいになるようにします。

 

横並びで、アイテムを縦方向いっぱいに表示します。

横並びで、アイテムを縦方向いっぱいに表示

 

アイテムごとにサイズを指定することも可能です。

アイテムごとにサイズを指定

 

アイテムを縦横いっぱいに広げて表示します。

アイテムを縦横いっぱいに広げて表示

 

アイテムごとにサイズを指定した、こんなレイアウトも可能です。

こんなレイアウトも可能です。

Flexboxの人気記事

Flexboxを使ったコードスニペット集 Flexbox Patterns
Flexboxを使ったコードスニペット集 Flexbox Patterns
スポンサーリンク
Flex Layout Attribute – これは便利!Flexboxレイアウトを簡単に実装することができるCSSライブラリ

みんなが見ている記事

コメントを投稿する

  • Posted on 2016.05.30
  • Views 485