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

flexってスマホサイトや最新のブラウザ対応だったらめちゃ便利だけど業務だとそうは言ってられない...
古いIE9~も対応せねばだったりAndroid2.3もサポートだったりというケースがあるのでまとめておく٩( 'ω' )و
IE8以下などはfloatやtableを検討するのもありかもね(´Д｀。)

flexのサポート範囲
https://caniuse.com/#search=flex

基本形

まずは基本となるベースを作っておく（色とサイズは適当）

html

<body>
  <div class="wrap">
    <div style="background-color: red;">1</div>
    <div style="background-color: blue;">2</div>
    <div style="background-color: green">3</div>
  </div><!-- /.wrap -->
</body>

css

.wrap div{
  width: 100px;
  height: 100px;
}

display: flex

親要素（.wrap）につけることで子要素の横並びレイアウトが簡単にできます！

css

.wrap{
  display: -webkit-box;  //この辺が
  display: -webkit-flex; //Android2.3~とか
  display: -ms-flexbox; //IE9~用
  display: flex; //最新のブラウザのみであればflexだけでもよいかも
}

align-items

垂直方向の考え方
デフォルトは上揃え、左揃えになっている。
※白背景だとわかりにくかったため背景を黄色にしました。

flex-start（上揃え）

css

    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;

flex-end（下揃え）

css

    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;

center（中央寄せ）

css

    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

baseline

高さが異なる要素でも文字のベースラインを合わせることができる！

css

    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;

justify-content

水平方向の考え方
デフォルトは左上揃えになっている。

flex-start（左揃え）

css

    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;

flex-end（右揃え）

css

    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;

center（中央揃え）

css

    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

space-between（均等に間隔を空ける）

css

    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;

space-around（均等に間隔を空ける）

左右の端にも半分ずつ間隔が空いているver

css

    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;

長くなったので残りはdisplay:flex系をまとめる②にてまとめる(｢ﾟｰﾟ)ﾄﾞﾚﾄﾞﾚ..