プログラマが覚えておいしいFlexbox

これなに

だいぶ前に社内発表した資料です。

Flexboxとは

---

柔軟なレイアウトシステム

---

HTMLのレイアウト

• 古くはTable Layout
  • CSSがまともに動いてない時代があった
  • ガラケー
• position: fixed
• Float
  • <br clear="all">による回り込みの解除
  • clearfix
  • %指定によるFluid / Grid実装
• display: table-cell
  • 合法的に使えるTable Layout
• translate

---

まさに群雄割拠

• いろんなやり方があった
• どれも機能的に足りておらず一つだけ覚えてもだめだった
• 無理くりな手法も多く、後ろ髪を引かれる思いで実装してた

---

全てをレイアウトを過去にするFlexible Box Layout Module (個人的な感覚)

---

震えるがいい

---

Flexboxの考え方

• 直接の子要素に影響を及ぼす
  • 親要素に影響を受けるpositonやfloatとは逆

---

レイアウト定義

• 並び
  • 方向
  • 順序
• 位置
  • 縦横方向
  • 均等割り付け
• サイジング
  • 固定
  • フレシキブル

---

サンプル

---

今日覚えて帰ってもらいたい一つの使い道

---

中央配置のレイアウト

---

.wrap 内の item を左右及び垂直中央に配置

---

<div class="wrap">
  <div class="item">item</div>
</div>

.wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.item {
  width: 200px;
  height: 200px;
}

---

解説

---

flex-direction

レイアウトの方向を決める、デフォルトは row （水平方向に左から右）

---

justify-content

flex-direction　で決めた軸に、子要素をどう配置するか

---

align-items

flex-direction　と直交する軸に、子要素をどう配置するか

---

つまるところ垂直中央

---

• 親要素がレイアウト情報を持つのでシンプル
  • いままでのレイアウト手法は子要素と親要素のレイアウト情報が密接に絡まり合って決定されていた
• ようやく使えるようになったお手軽垂直中央
  • table-cell からの解放
• さらに複雑なレイアウト組を可能にする豊富なオプション
  • 学習コストをあげている原因でもある

---

このレイアウトを他の手法でやると？

参考記事:

たった4行！ CSS3 Flexboxを使った史上最短の上下中央揃え2016年版

いろいろあるけど頭いたくなるょ。

---

SLDSのGrid

• .slds-grid は display: flex を宣言してる
• .slds-grid_align-center は justrify-content: center
• 逆に言うと、上記のプロパティのような本当に簡単なレイアウト組は普通にCSS書いとこ？という気持ち

ひっじょーにシンプルな作り　　
https://www.lightningdesignsystem.com/utilities/grid/

---

使えるブラウザ

• IE11〜
  • 古い仕様での実装のため書き方に差異がある

---

Bug

• そこそこ地雷が埋まってる
• 参考
  • flexbugs
  • flexboxのバグに立ち向かう（flexboxバグまとめ）
    
• 一部のバグを自動修正するツール
  • postcss-flexbugs-fixes

---

マルチブラウザでのチェックは必ずやろう

---

!!!!New Commer!!!!

---

2017年はGridレイアウト元年

これからのレイアウトはGrid Layoutで決まり？
※ICSさんより

---

To be continue.