社内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とは逆
レイアウト定義
- 並び
- 方向
- 順序
- 位置
- 縦横方向
- 均等割り付け
- サイジング
- 固定
- フレシキブル
サンプル
今日覚えて帰ってもらいたい一つの使い道
中央配置のレイアウト
.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〜
- ただしprefix必須
- 古い仕様での実装のため書き方に差異がある
- postcssのAutoprefixer推奨（WSP導入済み）
Bug
- そこそこ地雷が埋まってる
- 参考
- 一部のバグを自動修正するツール