flex

参考:

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

概要

参考:

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

使い方

参考:

Flexbox レイアウトまとめ – Qiita

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

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

要素の幅

参考:

flex | MDN

flex-grow | MDN

flex-shrink | MDN

flex-basis | MDN

伸長 (flex-grow)

参考:

Flexbox で枠の幅をコンテンツの幅に合わせたサイズにする | iPentec

flex-grow | MDN

折り返し (flex-wrap)

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

.nowrap { flex-wrap: nowrap; }
Code language: CSS (css)

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

.wrap { flex-wrap: wrap; }
Code language: CSS (css)

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

.wrap-reverse { flex-wrap: wrap-reverse; }
Code language: CSS (css)

参考:

flex-wrap | MDN

レイアウト

参考:

位置の揃え方まとめ – Qiita

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

中央寄せ

.wrapper { display: flex; justify-content: center; align-items: center; }
Code language: CSS (css)

参考:

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

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

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

右寄せ

.wrapper { display: flex; justify-content: flex-end; }
Code language: CSS (css)

参考:

右寄せの方法は結局 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 リファレンス

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

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

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

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

justify-content | MDN

交差方向の揃え

  • 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 のバグに立ち向かう/バグまとめ – Qiita

Flexbox adding 1px left margin in Safari – Stack Overflow

まとめ/チートシート

参考:

よく使う Flexbox の設定 – Qiita

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

Flexbox の機能一覧 | CMAN

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

A Complete Guide to Flexbox | CSS-Tricks

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

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA