[CSS]flex container・flex itemのプロパティ一覧:まとめ

最終更新日:2021.10.01 [金] 公開日:2019.12.13 [金] カテゴリー:html・CSS・JS備忘

Pocket
Facebook にシェア
LINEで送る

自分がよく使うflex containerのプロパティをまとめました。
全然覚えられないので(私だけ?)まとめておくと自分が楽なので・・・




flex container(親要素)に当てるプロパティ

上記のようなhtmlとして、親のul.flexbox、つまりflex containerに設定するプロパティになります。

ボックスをflexにする

display: -webkit-box;
display: -ms-flexbox;
display: flex;

flex-direction:主軸と交差軸を決めるプロパティ(縦並びか横並びか配置方向の設定)

row
(主軸が横:横並び)
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
row-reverse
(右からの横並び)
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
column
(縦並び)
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
column-reverse
(下からの縦並び)
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;

flex-wrap:要素の折り返し設定

nowrap
(折り返さない)
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
wrap
(折り返して複数行配置)
-ms-flex-wrap: wrap;
flex-wrap: wrap;
wrap-reverse
(先頭方向へ折り返し複数行配置)
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;

justify-content:主軸の寄せる方向と要素の間隔

flex-start
(先頭揃え)
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
flex-end
(末尾揃え)
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
center
(真ん中揃え)
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
space-between
(両端は余白なしで、均等間隔にならべる)
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
space-around
(両端の余白も含んで、均等間隔にならべる)
-ms-flex-pack: distribute;
justify-content: space-around;

align-items:交差軸(主軸が横並びなら縦側、主軸が縦並びなら横側)の寄せる方向と要素の間隔(一行の時に適用)

stretch
(コンテナいっぱいに配置)
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
flex-start
(先頭側揃えに配置)
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
flex-end
(後方側揃えに配置)
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
center
(真ん中揃え)
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
baseline
(ベースラインに揃えて配置)
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;

align-content:交差軸(主軸が横並びなら縦側、主軸が縦並びなら横側)の寄せる方向と要素の間隔(複数行全体:つまりflex-wrapがnowrap以外の時に適用)

stretch
(コンテナいっぱいに配置)
-ms-flex-line-pack: stretch;
align-content: stretch;
flex-start
(先頭側揃えに配置)
-ms-flex-line-pack: start;
align-content: flex-start;
flex-end
(後方側揃えに配置)
-ms-flex-line-pack: end;
align-content: flex-end;
center
(真ん中揃え)
-ms-flex-line-pack: center;
align-content: center;
space-between
(両端は余白なしで、均等間隔にならべる)
-ms-flex-line-pack: justify;
align-content: space-between;
space-around
(両端の余白も含んで、均等間隔にならべる)
-ms-flex-line-pack: distribute;
align-content: space-around;

flex itemに指定できるプロパティ

この例で言うところの、li側の個々の要素に個別に設定できるプロパティです。
クラス指定して個々に当てることが可能です。

order:flex item の並び順

*初期値は1のため、1以降を個別に設定すると後ろに回る。
マイナスを指定すると前に。
個別に1.2.3と並べたい順に指定すると思いのままに並び替えできる。

0(初期値) -webkit-box-ordinal-group: 1;
-ms-flex-order: 0;
order: 0;
1 -webkit-box-ordinal-group:2;
-ms-flex-order:1;
order:1;

flex-basis:flex itemの幅(主軸が縦:rowなら高さ)の基準設定

auto(初期値)やpxや%などで指定。
(ただしmax-widthやmin-widthの方が優先度高い)。
何も設定しなかったらautoになるので、そのまま自動で内容に合わせた幅になり、widthがあればwidthの幅になる。

-ms-flex-preferred-size: 50%;/*任意の数字*/
flex-basis: 50%;/*任意の数字*/

flex-grow:親要素のcontainerの幅(主軸が縦の場合高さ)に余ってる部分がある場合、どこまで伸ばすかを設定

*初期値は0で、これは余白があっても伸ばさないと言う初期値になっている。

-webkit-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;

この例で、スペースが200px余ってるとする。
各要素に1とした場合は、均等に分配1:1:1:1、つまり200pxを4つでわけて、50pxずつli要素を広げる。
.box_1にだけ1としたら、余ってる200pxは全部.box_1に足される(初期値は0なので、設定しない他の要素は0と言う判断)。

flex-shrink:親要素のcontainerの幅(主軸が縦の場合高さ)が足りない場合、子要素をどう縮めるか設定

*初期値は1、はみ出た部分を各要素均等に削る。0を指定するとその要素は削られない。

-ms-flex-negative: 1;
flex-shrink: 1;

この例で、スペースが200px足りないとすると、各アイテムの初期値1だと50pxずつ各アイテムは削られる。

align-self:交差軸の寄せる方向と要素の間隔

auto
(親から継承)
-ms-flex-item-align:auto;
align-self:auto;
stretch
(コンテナいっぱいに配置)
-ms-flex-item-align: stretch;
align-self: stretch;
flex-start
(先頭側揃えに配置)
-ms-flex-item-align: start;
align-self: flex-start;
flex-end
(後方側揃えに配置)
-ms-flex-item-align: end;
align-self: flex-end;
center
(真ん中揃え)
-ms-flex-item-align: center;
align-self: center;
baseline
(ベースラインに揃えて配置)
-ms-flex-item-align: baseline;
align-self: baseline;

flex:flex-grow flex-shrink flex-basis:一括指定

初期値は以下の通り。一括指定可能。

-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;

スポンサーリンク

コメントを残す

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

CAPTCHA