FLEXBOX-MEN: Apocalypse

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

目次• 自己紹介• FLEXBOX-MEN: Apocalypse

• レイアウト方法の比較• 便利ポイント• Flexbox

• 地雷ポイント• フレームワーク• まとめ

2 © Coding Design, 2016

自己紹介3 © Coding Design, 2016

自己紹介(1/3)

• 名前森　史憲（もり　ふみのり）

• 生年月日昭和51年6月9日

• 出身・現住所鹿児島県鹿児島市

• 容姿丸メガネ


自己紹介(2/3)

• Webサイト制作• Web関連技術講師• Web関連書籍執筆• イベント運営


自己紹介(3/3)

• カレーLOVE!!⭐カレー屋匠#匠盛

• ビールLOVE!!⭐城山観光ホテル#スタウトエール黒糖

• チョコレートLOVE!!⭐パティスリーヤナギムラ#薩摩チョコチップス


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


怪獣のように暴れまくる


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



FLEXBOX-MEN: Apocalypse



Webのレイアウトはひと筋縄ではいかない！そう、あいつは大怪獣…

Webzilla!!



レイアウト方法の比較


FLEXBOX-MEN: Apocalypse > レイアウト方法の比較

Webzilla を攻略する様々なレイアウト方法が使われた！14 © Coding Design, 2016


1. table2. float3. inline-block4. position15 © Coding Design, 2016


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


うーむ、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 class="item">item 2</div> <div class="item">item 3</div></div>



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



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



子要素の水平方向の揃え



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



子要素の垂直方向の揃え



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



子要素の折返し



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



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



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



子要素ごとに指定



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



子要素ごとに指定align-self で個別の子要素の垂直方向の揃えを制御できっち！値は flex-start, flex-end, center, baseline, stretch を入れもんそ！.item:nth-child(2) { align-self: flex-end;}



子要素ごとに指定order で個別の子要素の順番を制御できるぞ！たまがっが！値は数値じゃっど！.item:nth-child(2) { order: -1;}



地雷ポイント



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


FLEXBOX-MEN: Apocalypse > 地雷ポイント

ブラウザサポート• Can I use - Flexible Box Layout Modulehttp://caniuse.com/#feat=flexbox




ブラウザサポート• IEは10以上サポート

• 対策： IE9以下はfloatでレイアウトするか、 flexibility.js を使うか、サポート外にするか

• 森はflexibility.js未使用。おすすめはしません


https://github.com/10up/flexibility


ブラウザサポート• Android4.3以前は古い仕様での実装

• 例）Android4.4以降 display: flex;　→ Android4.3以前 display: -webkit-box;

• 対策： Sass flexbox mixin を使うか、サポート外にするか


https://github.com/mastastealth/sass-flex-mixin


バグ• IE10, IE11

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

column;を設定




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




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



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


https://github.com/philipwalton/flexbugs


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


flex-directionflex-wrapjustify-contentalign-itemsflex-basis…56 © Coding Design, 2016

ブラウザサポートバグJavaScriptの対応…


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


ぴんぽーん


そんなあなたに朗報。



フレームワーク



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


FLEXBOX-MEN: Apocalypse > フレームワーク

• Flexboxの自由に使いたい人向け• Sass flexbox mixin• Autoprefixer

• 既存のFlexboxグリッドを使いたい人向け(CSS)

• Flexbox Grid

• Flexboxグリッドをカスタマイズして使いたい人向け(Sass)

• Flexbox Grid Sass63 © Coding Design, 2016

https://github.com/mastastealth/sass-flex-mixin

https://github.com/postcss/autoprefixer

http://flexboxgrid.com

http://hugeinc.github.io/flexboxgrid-sass

まとめ64 © Coding Design, 2016

Flexboxはレイアウトするのにすごーく便利！65 © Coding Design, 2016

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


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


さあ最後の対決だ！Webzillaを動かして洞窟に入れよう！68 © Coding Design, 2016

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


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


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


FLEXBOX-MEN: Apocalypse

Technology