flex

参考:

flex | MDN

flex-grow | MDN

flex-shrink | MDN

flex-basis | MDN

基本

参考:

フレックスボックスレイアウト | MDN

フレックスボックスの基本概念 | MDN

使い方

参考:

Flexbox のチートシートを作ったので配布します | Webクリエイターボックス

Flexbox の各プロパティの使い方を詳しく解説 | コリス

A Complete Guide to Flexbox | CSS-Tricks

flex-wrap

フレックスボックスを折り返さずに表示する。

flex-wrap: nowrap;

フレックスボックスを折り返して表示する。

flex-wrap: wrap;

フレックスボックスを折り返して逆順に表示する。

flex-wrap: wrap-reverse;

参考:

flex-wrap | MDN

中央寄せ

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

参考:

実は超簡単だった!Flexbox を使って画面中央に表示させる方法 | Pizzamanz.net

画像がはみ出てしまう

参考:

flexbox で並べた画像がはみ出たり伸びたりしてしまうときの対処法 | コトダマウェブ

何で画像の枠がはみ出すの!? max-width:100% だけではダメ!そんなときの解決法 | ビバりずむ

バグ

参考:

flexbox のバグに立ち向かう バグまとめ – Qiita

flexbox adding 1px left margin in Safari – Stack Overflow

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です