Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@Bluewind1997

Flexの覚書

More than 1 year has passed since last update.

はじめに

これはFlexのチートシートとしての覚書。

親要素に設定

flex-direction

小要素の並びの向きを決める

  • row(デフォルト)
    横向き 向き:→

  • row-reverse
    横向き 向き:←

  • column
    縦向き 向き:↓

  • colmn-reverse
    縦向き 向き:↑

flex-wrap

範囲に収まりきらなかった場合の処理

  • nowrap(デフォルト)
    アイテムを折り返さずに一列に配置

  • wrap
    折り返して表示。下に折り返す。

  • wrap-reverse
    折り返して表示。上側に折り返す。

flex-flow

flex-directionflex-wrapの設定を同時に行える。
flex-direction :row nowrap;がデフォルト。

justify-content

揃え方。どちら寄りになるかなどの設定。

  • flex-start(デフォルト)
    子要素を左側に寄せる。

  • flex-end
    子要素を右側に寄せる。

  • center
    子要素を中央に寄せる。寄せるだけ。

  • space-between
    左右にぴったり広げるように均等に配置。余白を作らない。

  • space-around
    左右にアイテム間の余白と同じサイズの余白を開けつつ、広げるように配置する。

align-content

justify-contentの縦方向版。

align-items

垂直方向の位置を設定する際に使用。

  • stretch(デフォルト)
    小要素の上下の余白を埋めるように、アイテムの上下を広げる。
    小要素の高さを変更する。

  • flex-start
    子要素の上辺を揃えて配置する。

  • flex-end
    子要素の上辺を揃えて配置する。

  • center
    子要素を中央に揃えて配置する。

  • baseline
    子要素の文字のラインを揃えて配置する。

justify-items

align-itemsの横方向版。

子要素に設定

order

順番を設定できる。
デフォルト値は0。
マイナス値は設定不可。

flex-grow

伸び率を設定できる。
デフォルト値は0。
マイナス値は設定不可。

flex-shrink

縮み率を設定できる。
デフォルト値は0。
マイナス値は設定不可。

flex-basis

ベースとなるサイズの設定ができる。
デフォルト値はauto

flex

flex-grow,flex-shrink,flex-basisの設定を同時に行える。

align-self

親要素に設定するalign-itemsを子要素ごとに設定する際に使用する。
パラメータはalign-itemsと同一。

1
Help us understand the problem. What is going on with this article?
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
Bluewind1997
Kotlin使ったアプリ開発とかしてる人 https://www.gensounosakura.work
asia-quest
DX実現を目指す企業と並走する「デジタルインテグレーター」です。 通常のシステムインテグレーションだけではなく、お客様のDXを共に考えるコンサルティングから、 DXに必要な様々なデジタルテクノロジーの専門チームを有し、お客様のゴールに向けてシステムの設計、開発、運用までを一貫して請け負います。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?