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

最終更新日：2022.05.23 [月]　公開日：2019.12.13 [金]　カテゴリー：html・CSS・jQuery・JS備忘

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

Contents

flex container（親要素）に当てるプロパティ


flex1
flex1
flex1
flex1

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

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

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;

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;

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;

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;

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;


flex1
flex1
flex1
flex1

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

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

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

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

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

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

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


flex1
flex1
flex1
flex1

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

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

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


flex1
flex1
flex1
flex1

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

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;