【45：Flexbox】floatを使わずに要素を横並びに配置する

f:id:seintoseiya:20151215005318p:plain
プロジェクトNo.45：Flexbox - DEMO

今までは上記の画像のように横並びに要素を配置しようとした場合、
floatを使って実現するのが主流でした。（その前はテーブルレイアウト）
最近では新しく「Flexible Box Layout Module」＝Flexboxというものが、モダンブラウザで使用可能となり、
これからの主流になるのではないかと(私の中で)噂されています。

対応ブラウザの確認

Flexboxは仕様変更が度々あり、比較的新しいブラウザでののみ対応されています。
対応ブラウザに関してはCan I use…でご確認下さい。

使い方

Flexboxの指定

細かい設定は色々ありますが、基本的には「横並びにしたい要素の親要素にflex boxを指定するだけ」です。

HTML

<nav>
  <ul class="main-nav">
    <li><a href="#" class="logo">Onesway</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Works</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>

CSS

.main-nav {
  display: flex;
}

justify-contentプロパティ

要素と要素の間や、表示位置の指定する時にjustify-contentプロパティを使います。
値は以下の様なものを取ります。

space-between: 最初の要素が左端に、最後の要素が右端に移動し、その間の要素は等間隔に並べられる
flex-end: 右寄せ
center: 中央揃え

ロゴだけ左端に配置

ロゴを囲んでいるのはリストの最初の要素に対して、margin-right: auto; を加える。

.main-nav li:first-child {
  /* ロゴだけ左端 */
  margin-right: auto;
}

flexプロパティ

flexプロパティを使うと、横幅の比率を変更できます。

/* ２つ目の要素に対して、他のカラムの2倍の横幅 */
.main .col-2 {
  flex: 2;
}

align-itemsプロパティ

高さの異なる要素を配置を指定する際はalign-itemsプロパティを使います。
値は以下の様なものを取ります。

center: 中央揃え
flex-end: 下揃え
baseline: ベースラインで揃える

モバイル対応

モバイル対応も簡単で、いつもの様にmediaクエリを使い、flex-directionプロパティを一つ追加するだけです。

@media screen and (max-width: 700px) {
  .main {
  /*flex-direction は、要素の配置方向を指定するプロパティー
  デフォルト値は row
  column: 横並びから縦並びに変更*/
    flex-direction: column;
  }
}