Help us understand the problem. What is going on with this article?

CSS Flexbox チートシート

Flexboxを使うとき、ちら見できるようなチートシートを作成しました。
使い方の説明はチートシートの後に続きます。

Grid Layoutのチートシートはこちら

Flexbox チートシート

flexbox cheat sheet japanese.jpg

PDF版はこちら

Flexboxチートシートの見方

チートシートの左側は親要素に設定するプロパティ、

右上は子要素に設定するプロパティ、
右下は各プロパティと各値の説明になります。

よく使うプロパティは太文字、デフォルトは黄色文字です。
人型アイコンは参照を示し、枠人型①に対しては塗人型①を参照してください。
手型アイコンはショートハンドプロパティを示しています。
icons.jpg

Flexboxの作り方

チートシートを見ながら読み進めてください。

①親要素をフレックスコンテナとして指定する。

display: flex;
これだけでデフォルトである flex-direction: row; のflexboxができます。

②フレックスコンテナの主軸方向を指定する。

flex-direction:
チートシート左側にある②の四つの選択肢から、主軸方向を選択します。
デフォルトでは左上にある flex-direction: row; が設定されますが、
他に row-reverse; column; column-reverse; の三種類が選べます。
flex-direction.jpg

flex-wrap:
子要素(フレックスアイテム)が多い場合は flex-wrap: で折り返しの方法を指定します。

値     説明
nowrap; 折り返しなし
wrap; 折り返しあり
wrap-reverse; 逆方向から折り返し

flex-flow:
flex-direction: と flex-wrap: のショートハンド

各要素の位置やサイズを調整して完成。

各要素の位置調整には、②で設定した主軸、交差軸方向が影響します。
各プロパティに対する指定可能な値についてはチートシートの各項目を、
それぞれの値の動き方については右下にある人型②を参照してください。

親要素に設定するプロパティ

プロパティ 説明
justify-content: 主軸方向における子要素の位置指定 (人型①参照)
align-items: 交差軸方向における子要素の位置指定 (人型①参照)
align-content: flex-wrap: で折り返された行の交差軸方向の位置指定 (人型①参照)

各子要素に設定するプロパティ

プロパティ 説明
flex-grow: 伸びる比率
flex-shrink: 縮む比率
order: 順序の指定
flex-basis: 主軸方向におけるサイズ指定(widthにもheightにもなり得る)
align-self: 交差軸方向における各子要素の位置指定 (人型①参照)
z-index: 子要素同士の重なりの順序指定
flex: flex-grow: と flex-shrink: と flex-basis: のショートハンド

主軸、交差軸方向がわかると簡単にFlexboxが使えますね!
英語版のチートシートはこちら。

Flexbox cheat sheet / English version

flexbox cheat sheet.jpg

Grid Layoutのチートシートはこちら

参考

MDN: flexbox
CSS-TRICKS: flexbox
Udemy: CSS - The Complete Guide 2020 (incl. Flexbox, Grid & Sass)

7dt
HTML、CSSを勉強中
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした