display:flex系をまとめる②（古いブラウザ対応用）

display:flex系をまとめる①（古いブラウザ対応用）の続きです。

flex-direction

子要素の配置方向
デフォルトは左から右に配置されます。

row

デフォ。左から右に

css

    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

row-reverse

右から左へ

css

    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;

column

上から下。

css

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

column-reverse

下から上。

css

    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;

flex-wrap

子要素の折り返し設定

• 改行なし：.wrapに収まらなくても子要素が縮小されてむりやり収まる。
• 改行あり：.wrapに収まらなかったら折り返されて複数行になる。floatのイメージ

nowrap

改行なし/デフォルト

css

    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;

wrap

改行あり

css

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

wrap-reverse

改行ありだが折り返し地点が違う

css

    -webkit-flex-wrap: wrap-reverse;
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;

flex-flow

上記２点（flex-direction、flex-wrap）はまとめて書ける

css

    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;

flex

伸縮性設定のショートハンド

flex-grow

要素の伸びる倍率。全ての要素が収まりまだ余白がある際自動で可能領域まで伸びる。

flex-shrink

要素の縮小倍率。要素がはみ出てしまった際に自動的に収まるように縮む。

flex-basis

デフォルトは0
ベースとなる長さ、最小領域と言った感じ。