flexboxの使い方一覧
- 2019年4月27日
- 2020年3月12日
- HTML/CSS, メモ
- css
- ツール
- 親要素
- display: flex;
- flex-direction：子要素の配置方向
- row：左から順に。デフォルト。
- row-reverse：右から順に
- column：上から順に
- column-reverse：下から上に
- flex-wrap：子要素の折り返し設定
- nowrap：折り返しなし
- wrap：折り返しして複数行になることあり
- wrap-reverse：折り返しするときは、後半のが上にいく
- justify-content：水平方向の揃え方
- flex-start：横方向は左揃え、縦方向は上揃え
- flex-end：横方向は右揃え、縦方向は下揃え
- center：中央揃え
- space-between：余分な空きは均等にスペース開ける
- space-around：space-betweenと同じだが、両端にもスペースをあける
- align-items：垂直方向の揃え方
- flex-start：横方向は左揃え、縦方向は上揃え
- flex-end：横方向は右揃え、縦方向は下揃え
- center：中央揃え
- baseline：テキストのベースラインを揃える
- stretch：説明むずい。縦いっぱい使う。
- align-content：行の揃え方（複数行になった時）
- flex-start：横方向は左揃え、縦方向は上揃え
- flex-end：横方向は右揃え、縦方向は下揃え
- center：中央揃え
- space-between：余分な空きは均等にスペース開ける
- space-around：space-betweenと同じだが、両端にもスペースをあける
- 子要素
- flex：短縮系
- 0 1 auto：デフォルト
- flex-grow：伸びる倍率。このプロパティに従い、自動的に利用可能な領域いっぱいまで伸びる。
- 0：デフォルト
- 1：全部等分で伸びる
- 1、2：2は1のアイテムの2倍になる
- none： ‘0 0 auto’と見なされる。
- マイナス：無効
- flex-shrink：縮む倍率。
- flex-basis：widthみたいなもの。ベースとなる横幅。最小の長さ。
- align-self：個別のFlexアイテムの垂直方向の揃え方
- order：順番指定