FLEXBOX-MEN: Apocalypse

FLEXBOX-MEN:
Apocalypse
∼display: flex で
柔軟にレイアウトしよう！∼
@HTML Party かごんま 2016
コーディングデザイン森史憲
1 © Coding Design, 2016

目次
• 自己紹介
• FLEXBOX-MEN: Apocalypse
• レイアウト方法の比較
• 便利ポイント
• Flexbox
• 地雷ポイント
• フレームワーク
• まとめ

自己紹介

自己紹介(1/3)
• 名前
森史憲
（もりふみのり）
• 生年月日
昭和51年6月9日
• 出身・現住所
鹿児島県鹿児島市
• 容姿
丸メガネ

自己紹介(2/3)
• Webサイト制作
• Web関連技術講師
• Web関連書籍執筆
• イベント運営

自己紹介(3/3)
• カレーLOVE!!
⭐カレー屋匠
#匠盛
• ビールLOVE!!
⭐城山観光ホテル
#スタウトエール黒糖
• チョコレートLOVE!!
⭐パティスリーヤナギムラ
# 摩チョコチップス

Webのレイアウトは
悩ましい

怪獣のように
暴れまくる

果たして攻略できる日
は来るのか…

FLEXBOX-MEN:
Apocalypse

FLEXBOX-MEN: Apocalypse
Webのレイアウトはひと筋縄ではいかない！
そう、あいつは大怪獣…
Webzilla!!

レイアウト方法の比較

FLEXBOX-MEN: Apocalypse > レイアウト方法の比較
Webzilla を攻略する
様々なレイアウト方法
が使われた！

1. table
2. float
3. inline-block
4. position

どれも帯に短したすき
に長し…

うーむ、Webzillaは
手強い！

助けて！
FLEXBOX-MEN！

呼んだかい！

Flexboxを使って

一緒に攻略しよう

ぜっ23 © Coding Design, 2016

便利ポイント

FLEXBOX-MEN: Apocalypse > 便利ポイント
Flexboxの便利ポイントと
実際の使い方を見ていこう！

• HTMLが荒れない
• 上下真ん中寄せができる
• 要素の並べ替えができる
• 要素の改行時に間ができない
• スクロールバーが表示される

これまでの問題が一挙に解決！
では使い方を見てみよう！

Flexbox

FLEXBOX-MEN: Apocalypse > Flexbox
Flexboxの基本

Flexboxの基本
Flexboxは親要素と子要素が必要だ！
<div class="container">
<div class="item">item 1</div>
</div>

Flexboxの基本
display: flex; で親要素にFlexboxを設定する！
.container { display: ﬂex; }

Flexboxの基本
flex-direction で子要素のレイアウトを制御できるぞ！
値は row, row-reverse, column, column-reverse だ！
.container {
display: ﬂex;
ﬂex-direction: column-reverse;
}

子要素の水平方向のえ

子要素の水平方向のえ
justify-content で子要素の水平方向のえを制御できるわ！
値は flex-start, flex-end, center, space-between, space-around よ！
.container {
display: ﬂex;
justify-content: center;
}

子要素の垂直方向のえ

子要素の垂直方向のえ
align-items で子要素の垂直方向のえを制御できるっちよ！
値は flex-start, flex-end, center, baseline, stretch じゃっど！
.container {
display: ﬂex;
align-items: center;
}

子要素の折返し

子要素の折返し
flex-wrap で子要素の折り返しを制御できるぜ！
値は nowrap, wrap, wrap-reverse だべ！
.container {
display: ﬂex;
ﬂex-wrap: wrap-reverse;
}

子要素が縦に
複数並んだ時のえ

子要素が縦に複数並んだ時のえ
align-content で子要素が縦に複数並んだ時のえを制御できる！
値は flex-start, flex-end, center, space-between, space-around を使い
やんせ！
.container {
display: ﬂex;
align-content: ﬂex-end;
}

子要素ごとに指定

flex-basis で個別の子要素の最小幅を制御できったっど！
値は widthプロパティに指定するような値やっでな！
.item:nth-child(2) {
ﬂex-basis: 200px;
}

align-self で個別の子要素の垂直方向のえを制御できっち！
値は flex-start, flex-end, center, baseline, stretch を入れもんそ！
align-self: ﬂex-end;
}

order で個別の子要素の順番を制御できるぞ！たまがっが！
値は数値じゃっど！
order: -1;
}

地雷ポイント

地雷ポイント
実はまだ危ういところがあるFlexbox！
少しだけ抜粋してみた！

FLEXBOX-MEN: Apocalypse > 地雷ポイント
ブラウザサポート
• Can I use - Flexible Box Layout Module
http://caniuse.com/#feat=flexbox

• IEは10以上サポート
• 対策： IE9以下はfloatでレイアウトするか、 flexibility.js を使
うか、サポート外にするか
• 森はflexibility.js未使用。おすすめはしません

• Android4.3以前は古い仕様での実装
• 例）Android4.4以降 display: flex;
→ Android4.3以前 display: -webkit-box;
• 対策： Sass flexbox mixin を使うか、サポート外にするか

バグ
• IE10, IE11
• 親要素にmin-heightを指定するとalign-itemsが効かない
• 対策：親要素のさらに親要素にdisplay: flex; flex-direction:
column;を設定

バグ
• IE10, IE11
• 子要素にflex-basisを設定しないと長い文章を折り返さない
• 対策：幅に合わせて子要素にflex-basisとmax-widthを設定
• max-widthを指定するのはbox-sizing: border-box;に対応させる
ため

バグ
• IE10, IE11
• 子要素にimg要素を入れると画像の縦横比が崩れる
• 対策：子要素はdiv要素などを入れ、その中にimg要素を入れ
る

バグ
詳しくは Flexbugs をチェック！主にIE10, 11が多い！
バグ・解決策のデモがあるよ！
• Flexbugs

JavaScriptでの操作
• flex-directionやorderで順番を変えてもDOMの順番は変わってい
ない
• CSSで順番を変える前のHTMLがベースに念頭に置く。

flex-direction
flex-wrap
justify-content
align-items
flex-basis…

バグ
JavaScriptの対応…

ああ、もう頭がいっぱ
いだぁぁぁ！！！！

ぴんぽーん

そんなあなたに朗報。

フレームワーク

フレームワーク
こんにちは。長官です。
バグ対策もされてたりするので、フレームワークを使おうね！

FLEXBOX-MEN: Apocalypse > フレームワーク
• Flexboxの自由に使いたい人向け
• Sass flexbox mixin
• Autoprefixer
• 既存のFlexboxグリッドを使いたい人向け(CSS)
• Flexbox Grid
• Flexboxグリッドをカスタマイズして使いたい人向け(Sass)
• Flexbox Grid Sass

まとめ

ただし、
対象ブラウザには注意！

ブラウザごと（主にIE10,11）の
バグにも注意！

さあ最後の対決だ！
Webzillaを動かして
洞窟に入れよう！

ありがとう!君の活躍で
世界は救われたよ！

これからもFlexboxを使
って世界を救ってね！

ご清聴ありがとう
ございましたッッ！

FLEXBOX-MEN: Apocalypse

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

FLEXBOX-MEN: Apocalypse