株式会社LIG (リグ) - 台東区上野にあるWeb制作会社

毎年、花火を見るとあの夏のことを思い出します。再放送のドラマを見て寝る生活をしていた、あの夏のことをね・・・。

LIGブログ
Web制作
HTML・CSS
CSS
Angular Materialのfle...

2015.08.03 Web制作

Angular Materialのflexboxを使ったLayoutを解説してみた

こんにちは、店長です。
最近は実案件でAngularJSを使う機会が増えてきました。
そこで導入しているのがAngular Materialという、Googleが提供するAngularJS用のUIコンポーネントです。

Angular MaterialのLayoutコンポーネントはflexboxを使用したものになっています。
Angularと書きましたが、AngularJSらしいことは今回出てきません……。

どのようにLayoutにflexboxが使用されているのか、詳しく解説していきたいと思います。

今回のDEMOはこちらからご覧になれます。

flexboxについて

まず、Angular MaterialのLayoutコンポーネントを使用する前に、簡単にflexboxのレイアウトについて解説したいと思います。

flexboxレイアウトは、以下のように親要素のflexコンテナと子要素のflexアイテムで構成されています。

flex

flexboxのレイアウトを実際使う際は、親要素のHTMLに対してdisplay: flexを指定するだけです。
下記のようにすることで、その子要素はすべてflexアイテムとして扱われます。

<div class="flexbox">
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
</div>

.flexbox{
    display: flex;
}

これを踏まえてAngular MaterialのLayoutについて解説していきたいと思います。

Layoutの基本

layoutを指定すると、指定した要素にdisplay: flexが付与されます。

<div layout>
    <div>flex item</div>
    <div>flex item</div>
    <div>flex item</div>
</div>

また、layoutに値を指定することで、子要素の並びを変更することができます。
layout="row"を指定すると横並び、layout="column"を指定すると縦並びになります。
これはflex-directionというプロパティによって並びの向きが変更されています。

<!--横並び-->
<div layout="row">
    <div>Column A</div>
    <div>Column B</div>
    <div>Column C</div>
</div>

<!--縦並び-->
<div layout="column">
    <div>Column A</div>
    <div>Column B</div>
    <div>Column C</div>
</div>

flex-direction – CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction

flex

layoutの子要素に対してflex属性を指定すると、隙間を埋めるような均等配置になります。

flex属性を指定すると、CSSでflex-growが指定されます。（実際はショートハンドで書かれています）
flex-growは他のflexアイテムと比較して、どれくらいの大きさかを指定できます。
このレイアウトコンポーネントではflex-grow: 1が指定されるので、全て均等配置になります。

<div layout="row">
    <div flex>Column A</div>
    <div flex>Column B</div>
    <div flex>Column C</div>
</div>

flex-grow – CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/flex-grow

また、flex属性に数値を指定すると幅を指定することができます。
幅の合計値が100になると横幅いっぱいに配置されます。（こちらも実際はショートハンドで書かれています）
ただし指定できる数値は33,66と5の倍数のみなので注意してください。

そして、flex属性に数値を与えると、flex-basisが指定されます。
flex-basisはflexアイテムのサイズを指定できます。
数値はパーセントで指定されるため、100で横幅いっぱいになります。

<div layout="row">
    <div flex="20">Column A</div>
    <div flex="50">Column B</div>
    <div flex="30">Column C</div>
</div>

flex-basis – CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/flex-basis

layout-wrap

100を超えるとflexコンテナの親要素の幅を超えてしまい、外へはみ出るような形になってしまいます。

<div layout="row">
    <div flex="20">Column A</div>
    <div flex="50">Column B</div>
    <div flex="60">Column C</div>
</div>

flexアイテムがはみ出た場合は段を下げ、flexコンテナの親要素の幅に収まるようにしたい場合は、flexコンテナに対してflex-wrap属性を指定します。

<div layout="row" layout="wrap">
    <div flex="20">Column A</div>
    <div flex="50">Column B</div>
    <div flex="60">Column C</div>
</div>

flex-wrap属性を指定すると、CSSでflex-wrap: wrapが指定されます。
flex-wrapはflex-itemの並べ方を指定するプロパティです。
初期値（nowrap）の場合は、flex-itemが一列に並ぶ形になります。wrapを指定するとはみ出た場合はラインが複数になり、コンテナ内に流し込めるようになります。

flex-wrap – CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/flex-wrap

flex offset

flexアイテムにoffset属性を指定すると、左側にスペースを作ることができます。
offset属性を指定したアイテムにはmargin-leftが付与されるため、左側にスペースが出来ます。
指定できる数値は先ほどと同じです。

<div layout="row">
    <div flex="50" offset="20">Column</div>
    <div flex="30">Column</div>
</div>

flex-order

flex-order属性はflexアイテムの並び順を指定することができます。
値は0から9まで使用することが可能で、番号が若い順で並べられます。

<div layout="row">
    <div flex flex-order="2">Column order:2</div>
    <div flex flex-order="1">Column order:1</div>
    <div flex flex-order="3">Column order:3</div>
</div>

これはCSS上でorderプロパティを指定することにより実現しています。

order – CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/order

flex-align

`layout-align`属性を使用すると、flexアイテムの並びを変更することができます。
flexboxの場合、flexアイテムは左から右へ順番に並びます。
左側がstart、右側がendです。

`layout-align=”start”`を指定すると左寄せ、`layout-align=”end”`を指定すると右寄せ、`layout-align=”center”`を指定すると中央寄せになります。

<div layout="row" layout-align="center">
    <div flex="20">Column</div>
    <div flex="20">Column</div>
    <div flex="20">Column</div>
</div>

また`layout-align=”space-around”`は各flexアイテムの左右の余白が、全て均等になった状態でflexコンテナ内に配置されます。
`layout-align=”space-between”`はspace-aroundに似ていますが、はじめのflexアイテムの左余白と、終わりのflexアイテムの右余白がない状態になります。

<div layout="row" layout-align="space-between">
    <div flex="20">Column</div>
    <div flex="20">Column</div>
    <div flex="20">Column</div>
</div>

<div layout="row" layout-align="space-around">
    <div flex="20">Column</div>
    <div flex="20">Column</div>
    <div flex="20">Column</div>
</div>

flexコンテナに対してalign-contentプロパティを指定することにより、配置方法を指定することができます。

align-content – CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/align-content

そしてlayout-align属性は左右の配置の指定後に、上下の配置を指定することも可能になっています。

<div layout="row" layout-align="center center">
    <div flex="20">Column</div>
    <div flex="20">Column</div>
    <div flex="20">Column</div>
</div>

指定する際は左右の配置の指定後にスペースを入れ、上下の配置を指定します。
flexコンテナの上がstart、下がend、中央に配置する際はcenterを指定します。

flexコンテナに対してalign-itemsプロパティを指定することにより、配置方法を指定することができます。

align-items – CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/align-items

flex2

show & hide

show属性、hide属性は表示・非表示を切り替えます。

<div layout="row">
    <div flex hide>Column 1</div>
    <div flex>Column 2</div>
    <div flex>Column 3</div>
</div>

この場合Column 1は表示されません。
show属性は次に紹介するBreak Pointと合わせて利用する方法が多いです。

Break Point

各属性は、属性の後に接尾辞をつけることで、画面幅に応じた変更をすることができます。

sm	ウィンドウサイズが600pxより小さいときに適応
md	ウィンドウサイズが900pxより小さいときに適応
lg	ウィンドウサイズが1200pxより小さいときに適応
gt-sm	ウィンドウサイズが600px以上のときに適応
gt-md	ウィンドウサイズが900px以上のときに適応
gt-lg	ウィンドウサイズが1200px以上のときに適応

例として先ほど紹介した、hide属性を使って説明したいと思います。

<div layout="row">
    <div flex hide-sm>Column 1</div>
    <div flex>Column 2</div>
    <div flex>Column 3</div>
</div>

上記のようにhideに-smをつけると、ウィンドウサイズが600pxより小さいときのみColume 1が非表示になります。

<div layout="row">
    <div flex hide show-sm>Column 1</div>
    <div flex>Column 2</div>
    <div flex>Column 3</div>
</div>

また、hideにshow-smをつけると、ウィンドウサイズが600pxより小さいときのみColume 1が表示されるようになります。

show、hide以外にも、今回紹介した属性はすべてBreak Pointの指定ができます。

まとめ

Angular Materialのほんの一部の機能をご紹介しましたが、Layout以外にもMaterial Designに沿ったさまざまなコンポーネントが用意されています。

いくつかコンポーネントを使ってみましたが、Tabコンポーネントの操作性が少し気になったり高さを指定しないとうまく動かなかったりと、気になる部分はありますが使い勝手は良く感じました。今後のアップデートを期待しましょう。

気になる方はぜひ使ってみてください！

【AngularJS関連】