2017-5-22
[CSS]FlexBoxに関してのメモ
FlexBox がいい加減積極的に使うべき物になってるので、まとめておく。
不具合
ここにまとまってる。
これはまた別にまとめたい。
flex-item 内の要素に対して text-overflow が効かない
不具合かは仕様書を読まないとわからないが、flex-item 内の要素に対して text-overflow が効かない問題が有る。
対策としては、flex-item に対してmin-width: 0;を指定すればいい。
flexbox 内で text-overflow が効かない | cly7796.net
IE11 で box-sizing が flex-basis に効かない
flex-basisと同値のmax-widthを指定すれば OK。
.flex-item {
flex-basis: 50%;
max-width: 50%;
}
【IE11 バグ】 flex-basis に box-sizing が効かない不具合 – 広告のフジプロ
プロパティ
display: flex を指定した要素に対するプロパティ
- flex-direction: 横並び縦並び、降順昇順を指定出来る
- flex-wrap: 折り返すか、また折り返す場合上と下どっちに折り返すか
- justify-content: 整列方法。左揃え中央揃え右揃え均等配置（両端余白有り・無し）
- align-items: 縦揃えの指定。中央揃え、ベースライン、同じ高さに揃える
- align-content: コンテナに対してどう揃えるか
フレックスアイテムに対するプロパティ
- align-self: 行に対してそのアイテムをどう整列させるか
- order: 順序
- flex-basis: 基本の長さの指定
- flex-grow: どれだけのびるか
- flex-shrink: どれだけ縮むか
余白がある、またはコンテナをオーバーしてしまってるとき
各アイテムの flex-grow, flex-shrink に指定された値に従ってで各アイテムが伸縮する。
詳しくは CodeGrid を購読して見ろ。
FlexBox じゃないと HTML/CSS のみで出来ないレイアウト
FlexBox は微妙にややこしいので、従来の方法で問題なくコーディング出来るのであればそっちを優先したい。
そのため、「FlexBox じゃないと実現できない or FlexBox 使ったほうが簡潔になる」パターンを以下にまとめる。
並べた要素を行毎に高さを揃える
上記のようなレイアウトは、FlexBox を使えない場合は JavaScript を使わないと実現できない。
前提知識
align-items に stretch を使えばフレックスアイテムの高さを行毎に揃えることが出来るが、レイアウトとモジュールで分けたい場合はそうもいかない。
その場合は以下のようにする。
flex をつかって配置したモジュールの高さを、レイアウトの高さに揃えるデモ
画像+テキストレイアウト & テキスト縦方向中央揃え & 奇数（偶数）アイテム画像位置逆転 & レスポンシブ
要はこんなレイアウト。結構よく見る。
要件としては以下のような物。
- PC レイアウトは画像＋テキストの横並びレイアウト
- PC レイアウトでは奇数番目のアイテムは画像とテキストの配置が逆
- テキストは縦方向中央揃え
- スマホレイアウトは縦に積むレイアウト
個々の要素だと FlexBox がなくてもいけるんだけど、全部そろうと table レイアウト+JavaScript じゃないと無理になる。
FlexBox だと簡単に出来ること
横並びナビのリンクの高さを揃える / 横並びナビの一部を右端に寄せる
align-items: stretchが便利な例。
あとmargin-x: autoも便利。
上下中央配置
上下中央配置だけだと table レイアウトでも可能だけど、例みたいに「画像を中央配置して、ビューポートサイズに応じて縮める（拡大はしない）」みたいな要件の場合は FlexBox じゃないと無理。（table の仕様上、ビューポートを縦方向に縮めても、画像が縮小しない）