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

社内LT資料です。

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とは逆

レイアウト定義

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

サンプル

https://codepen.io/8845musign/pen/awQamg


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


中央配置のレイアウト


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

https://codepen.io/8845musign/pen/RgqZMV


<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 (水平方向に左から右)

image.png


justify-content

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

image.png


align-items

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

image.png


つまるところ垂直中央

image.png


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

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

参考記事:

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

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


SLDSのGrid

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

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


使えるブラウザ

  • IE11〜
    • ただしprefix必須
    • 古い仕様での実装のため書き方に差異がある
  • postcssのAutoprefixer推奨(WSP導入済み)

Bug


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


To be continue.