flex

参考

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

概要

参考

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

使い方

参考

Flexbox レイアウトまとめ – Qiita

もう迷わない! Flexbox の使い方を徹底解説 | Web Design Trends

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

要素の幅を伸縮させる

参考

flex | MDN

flex-grow | MDN

flex-shrink | MDN

flex-basis | MDN

折り返し (flex-wrap)

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

flex-wrap: nowrap;

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

flex-wrap: wrap;

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

flex-wrap: wrap-reverse;

参考

flex-wrap | MDN

レイアウト

参考

位置の揃え方まとめ – Qiita

フレックスコンテナー内のアイテムの配置 | MDN

中央寄せ

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

参考

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

文中のアイコンが上下にズレてしまう問題 – Qiita

Vertically center and left-align a column of flex items – Stack Overflow

右寄せ

.wrapper {
    display:         flex;
    justify-content: flex-end;
}

参考

右寄せの方法は結局 flex が一番良さそう | JavaScript に関するお知らせ

端揃え (justyify-content)

  • flex-start左寄せ/軸の開始方向に揃える。(デフォルト)
  • flex-end右寄せ/軸の終端方向に揃える。
  • center中央揃え
  • space-betweenアイテムの間隔を均等に割り当てる。
  • space-around両端を含めてアイテムの間隔を均等に割り当てる。

参考

Flexbox で左寄せ・中央寄せ・右寄せを指定する方法 | Web Design Trends

justify-content 使い方、アイテムの配置する位置を指定する | SHU BLOG

justify-content プロパティ | HTML5 & CSS3 リファレンス (htmlcss.jp)

Flexbox で、要素の左右中央寄せ、均等割り、右寄せ (justyify-content) の方法 | レンタルサーバーナレッジ

justify-content プロパティの意味と使い方 | できるネット

代表的な justify-content と特徴 – Qiita

justify-content | HTML クイックリファレンス

justify-content | MDN

交差方向の揃え (align-items / align-self)

  • align-items親要素に付与すると子要素全てに作用する。
  • align-self子要素自身に指定する。
配置の指定
  • normalデフォルト
  • flex-start上揃え/軸の開始方向に揃える。
  • flex-end下揃え/軸の終端方向に揃える。
  • center中央揃え
  • baselineベースラインを揃える。
  • stretch要素を交差方向の幅いっぱいまで広げる。

参考

align-items の使い方、配置する方向を指定する! | SHU BLOG

align-items プロパティの意味と使い方 | できるネット

align-items – flex アイテムの垂直方向の揃え方 | CMAN

align-items | HTML クイックリファレンス

縦方向中央に配置したいとき、align-items: center; が効かないときに確認すること | b.

align-items | MDN

align-self | MDN

部分的に揃え方向を変える

参考

CSS の flexbox で最後の1つだけ右寄せ、または最初の1つだけ左寄せにする方法 | WEMO

Flexbox で最後の1つだけ右寄せや下寄せにする方法! | 模写修行メディア

画像がはみ出てしまう

参考

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

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

バグ

参考

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

flexbox adding 1px left margin in Safari – Stack Overflow

まとめ/チートシート

参考

CSS Flexbox で使いたい40個のプロパティ | Grab

flexbox の機能一覧 | CMAN

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

A Complete Guide to Flexbox | CSS-Tricks

記事をシェアする:
タグ:

コメントを残す

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