自己紹介

HAL大阪卒
Tech:Campでエンジニアをしている山本です。
初めての投稿なので至らないことがありますがよろしくお願いします。
HAL Advent Calendar 2016
HAL生によるアドベントカレンダーで投稿した記事です。

※今回は画像がないのでわかりにくいです。。。

Flexboxの概要

複雑な Web ページをレイアウトすることを目的とし、画面やブラウザーウィンドウのサイズがさまざまに変化する場合にも要素の相対的な位置とサイズを一定に保つ場合に、特に役立ちます。位置とサイズを正しく設定するのが難しいフロートへの依存を軽減できます。

IE10の開発者向けガイドから引用

前から気にはなっていたのだがBootstrapなどがあったので使う機会がなかった。
この機会に勉強してみました。

Flexboxの便利なこと

今まで色んなプロパイを組み合わせていたことがFlexboxなら簡単にできる

CSSで一行追加するだけで横並びにできる
横並びになった要素の高さが最初から揃ってる
要素を上下左右、好きな順序に並び替えられる
スペースの操作も自由自在
高さの異なる横並びの要素を、簡単に上下中央揃え

では実際に使用してみる

html

  <ul class="flexbox">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>

基本レイアウト

適用したい要素の親要素にflexを指定します。

css

  .flexbox {
    display: flex;
  }

上から下に配置

上から下に配置させる場合はflex-direction: column;を指定します。

css

  .flexbox {
    display: flex;
    flex-direction: column;
  }

下から上に配置

「column」と同じで縦に配置されるが、並ぶ順序は「下から上」場合はcolumn-reverse;を指定します。

css

  .flexbox {
    display: flex;
    flex-direction: column-reverse;
  }

左寄せ

左に寄せる場合はjustify-content: flex-start;を指定する

css

  .flexbox {
    display: flex;
    justify-content: flex-start;
  }

右寄せ

右に寄せる場合はjustify-content: flex-end;を指定します。

css

  .flexbox {
    display: flex;
    justify-content: flex-end;
  }

中央寄せ

中央に寄せる場合はjustify-content: center;を指定します。

css

  .flexbox {
    display: flex;
    justify-content: center;
  }

均等に間隔をあける

均等に間隔をあける場合はjustify-content: space-between;を指定します。

css

  .flexbox {
    display: flex;
    justify-content: space-between;
  }

左右の端にも半分ずつ間隔を空ける

均等なおかつ左右の端にも半分ずつ間隔を空けるのはjustify-content: space-around;を指定します。

css

  .flexbox {
    display: flex;
    justify-content: space-around;
  }

あとがき

とりあえず画像の貼り付け方がわからなかったので諦めました。。。
また勉強して編集します
すごくわかりにくいですが申し訳ないです。

などなどこのようにfloatなどを使わなくても簡単にできます。
他にも色々組み合わせることで便利に使えます。
勉強不足で伝えるのが下手くそで申し訳ないです。。。。
最後までありがとうございました。

Flexboxを使ってみた