North Detail / ノースディテール

BLOG ブログ

ブログ
CATEGORY
TECH

そろそろFlexbox(css)を理解しておこう

Flexbox 概要

Flexbox は css3.0 から正式採用になったレイアウト方法です。
正式名称は『フレキシブルボックスレイアウトモジュール(Flexible Box Layout Module)』らしいです。
長いですね…強そうですね…偉そうですね…
名称は長いですが float を多用し、入れ子しまくってレイアウトしていた頃に比べれば、html・cssともにコードはスーパー簡素化できます!

基本的には グリッドレイアウト と同じく、コンテナ(親要素)内にある、アイテム(子要素)が適用範囲となり、並び順・折り返し・表示方向・寄せ具合などを調整することが出来ます。
親要素に display:flex(もしくは inline-flex); を指定することで、子要素は Flexアイテムとして認識されます

flex-wrap

アイテムの折り返しを設定します

<ul>
  <li>1st</li>
  <li>2nd</li>
  <li>3rd</li>
  <li>4th</li>
  <li>5th</li>
  <li>6th</li>
  <li>7th</li>
</ul>
ul{
  display:flex;
  li{
    width:20%;
  }
}

flex-wrap:nowrap;

各 liタグには width:20%; が設定されていますが、はみ出すことなく、折り返すことなくレイアウトされます。

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th
  • 6th
  • 7th

flex-wrap:wrap;

各 liタグには width:20%; が設定されているので、横並び5個(20%×5=100%)で折り返してレイアウトされます。

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th
  • 6th
  • 7th

flex-wrap:wrap-reverse;

各 liタグには width:20%; が設定されているので、横並び5個(20%×5=100%)で折り返してレイアウトされます、さらに上段下段が逆になります。
(イマイチ用途が見当たらないですねw)

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th
  • 6th
  • 7th

flex-direction

アイテムの並び順を設定します

<ul>
  <li>1st</li>
  <li>2nd</li>
  <li>3rd</li>
  <li>4th</li>
  <li>5th</li>
</ul>
ul{
  display:flex;
}

flex-direction:row;

左から右へ、横並びでレイアウトされます。

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th

flex-direction:row-reverse;

右から左へ、横並びでレイアウトされます。

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th

flex-direction:column;

上から下へ、縦並びでレイアウトされます。

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th

flex-direction:column-reverse;

下から上へ、縦並びでレイアウトされます。

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th

align-items

アイテムの寄せ具合を設定します

<ul>
  <li>1st</li>
  <li>2nd<br>2nd</li>
  <li>3rd</li>
  <li>4th</li>
  <li>5th<br>5th<br>5th</li>
</ul>
ul{
  display:flex;
  justify-content:space-between;
  li{
    padding:.5em 1em;
    &:nth-child(3){
      padding:2em 1em;
    }
    &:nth-child(4){
      padding:0 1em;
    }
  }
}

align-items:stretch;

アイテムの高さ(縦並びの場合は幅)を、コンテナの高さ(縦並びの場合は幅)いっぱいいっぱいにレイアウト。

  • 1st
  • 2nd
    2nd
  • 3rd
  • 4th
  • 5th
    5th
    5th

align-items:center;

個々のアイテム高さ(縦並びの場合は幅)依存で、コンテナの高さ(縦並びの場合は幅)に対して中央揃えにレイアウト。

  • 1st
  • 2nd
    2nd
  • 3rd
  • 4th
  • 5th
    5th
    5th

align-items:flex-start;

個々のアイテム高さ(縦並びの場合は幅)依存で、コンテナに対して上揃えにレイアウト。

  • 1st
  • 2nd
    2nd
  • 3rd
  • 4th
  • 5th
    5th
    5th

align-items:flex-end;

個々のアイテム高さ(縦並びの場合は幅)依存で、コンテナに対して下揃えにレイアウト。

  • 1st
  • 2nd
    2nd
  • 3rd
  • 4th
  • 5th
    5th
    5th

align-items:baseline;

個々のアイテム高さ(縦並びの場合は幅)依存で、アイテム内ベースライン揃えにレイアウト。

  • 1st
  • 2nd
    2nd
  • 3rd
  • 4th
  • 5th
    5th
    5th

align-content

複数行アイテムの寄せ具合を設定します

<ul>
  <li>1st</li>
  <li>2nd</li>
  <li>3rd</li>
  <li>4th</li>
  <li>5th</li>
  <li>6th</li>
  <li>7th</li>
</ul>
ul{
  display:flex;
  flex-wrap:wrap;
  height:15em;
  li{
    width:33.3333%;
  }
}

align-content:stretch;

コンテナの高さ(縦並びの場合は幅)いっぱいいっぱいに、アイテムを拡げてレイアウト。

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th
  • 6th
  • 7th

align-content:flex-start;

アイテムの高さ(縦並びの場合は幅)依存で、コンテナ先頭からレイアウト。

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th
  • 6th
  • 7th

align-content:flex-end;

アイテムの高さ(縦並びの場合は幅)依存で、コンテナ後尾からレイアウト。

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th
  • 6th
  • 7th

align-content:center;

アイテムの高さ(縦並びの場合は幅)依存で、コンテナの中央揃えにレイアウト。

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th
  • 6th
  • 7th

align-content:space-between;

最上行はコンテナ上部に、最下行はコンテナ下部に、間に入る行は等間隔にレイアウト。
(横並びの場合は、左右の列はそれぞれ左端・右端に、間に入る列は等間隔にレイアウト。)

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th
  • 6th
  • 7th

align-content:space-around;

全ての行間を同じ間隔にてレイアウト。
※最上行の上・最下行の下には、上記間隔の半分
(横並びの場合は、全ての列余白を同じ間隔にてレイアウト。
※左端・右端の列外側には、上記間隔の半分)

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th
  • 6th
  • 7th

align-content:space-evenly;

全ての行間を同じ間隔にてレイアウト。
※最上行の上・最下行の下も、上記間隔と同じ
(横並びの場合は、全ての列余白を同じ間隔にてレイアウト。
※左端・右端の列外側にも、上記間隔と同じ)

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th
  • 6th
  • 7th

justify-content

アイテムの寄せ具合を設定します

<ul>
  <li>1st</li>
  <li>2nd</li>
  <li>3rd</li>
  <li>4th</li>
  <li>5th</li>
</ul>
ul{
  display:flex;
}

justify-content:flex-start;

アイテムの幅依存で、コンテナ内先頭からアイテムをレイアウト。
(縦並びの場合は高さ依存で、コンテナ内先頭からアイテムをレイアウト。)

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th

justify-content:flex-end;

アイテムの幅依存で、コンテナ内後尾からアイテムをレイアウト。
(縦並びの場合は高さ依存で、コンテナ内後尾からアイテムをレイアウト。)

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th

justify-content:center;

アイテムの幅依存で、コンテナの中央寄せでレイアウト。
(縦並びの場合は高さ依存で、コンテナの中央寄せでレイアウト。)

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th

justify-content:space-between;

一番左のアイテムはコンテナ左端に、一番右のアイテムはコンテナ右端にレイアウト。それ以外のアイテムはコンテナ幅依存で等間隔にレイアウト。
(縦並びの場合は、最上行はコンテナ上部に、最下行はコンテナ下部に、間に入る行は等間隔にレイアウト。)

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th

justify-content:space-around;

アイテム間を同じ間隔にてレイアウト。
※両端の外側には、上記間隔の半分
(※縦並びの場合は、最上行の上・最下行の下には、上記間隔の半分)

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th

justify-content:space-evenly;

アイテム間を同じ間隔にてレイアウト。
※両端の外側も、上記間隔と同じ
(※縦並びの場合は、最上行の上・最下行の下も、上記間隔と同じ)

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th

order(このプロパティはアイテム要素に指定します)

アイテムの表示順を設定します

<ul>
  <li>1st</li>
  <li>2nd</li>
  <li>3rd</li>
  <li>4th</li>
  <li>5th</li>
  <li>6th</li>
  <li>7th</li>
  <li>8th</li>
  <li>9th</li>
  <li>10th</li>
</ul>
ul{
  li{
    &:first-child{
      width:50%;
      order:5;
    }
    &:nth-child(2){
      width:25%;
      order:8;
    }
    &:nth-child(3){
      width:50%;
      order:2;
    }
    &:nth-child(4){
      width:100%;
      order:6;
    }
    &:nth-child(5){
      width:25%;
      order:10;
    }
    &:nth-child(6){
      width:25%;
      order:3;
    }
    &:nth-child(7){
      width:25%;
      order:9;
    }
    &:nth-child(8){
      width:50%;
      order:4;
    }
    &:nth-child(9){
      width:25%;
      order:7;
    }
    &:last-child{
      width:25%;
      order:1;
    }
  }
}

アイテムを 10-3-6-8-1-4-9-2-7-5 の順番で設定しています

コンテナ内の同列アイテムの表示順番を指定できます。

  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th
  • 6th
  • 7th
  • 8th
  • 9th
  • 10th

flex-grow・flex-shrink・flex-basis
(これらのプロパティはアイテム要素に指定します)

伸び率・縮み率・サイズ感を設定します

<ul>
  <li>1st</li>
  <li>2nd</li>
  <li>3rd</li>
  <li>4th</li>
</ul>

flex-grow

アイテム同士の大きさ(伸び率)を相対的に指定します。

ul{
  display:flex;
  li{
    &:first-child{
      flex-grow:1;
    }
    &:nth-child(2){
      flex-grow:2;
    }
    &:nth-child(3){
      flex-grow:3;
    }
    &:last-child{
      flex-grow:4;
    }
  }
}
  • 1st
  • 2nd
  • 3rd
  • 4th

flex-shrink

flex-growとは逆で、アイテム同士の小ささ(縮み率)を相対的に指定します。

ul{
  display:flex;
  li{
    &:first-child{
      flex-shrink:2.75;
    }
    &:nth-child(2){
      flex-shrink:3;
    }
    &:nth-child(3){
      flex-shrink:3.25;
    }
    &:last-child{
      flex-shrink:3.5;
    }
  }
}
  • 1st
  • 2nd
  • 3rd
  • 4th

flex-basis

アイテムの初期サイズを指定します。

ul{
  display:flex;
  li{
    &:first-child{
      flex-basis:20%;
    }
    &:nth-child(2){
      flex-basis:25%;
    }
    &:nth-child(3){
      flex-basis:30%;
    }
    &:last-child{
      flex-basis:50%;
    }
  }
}
  • 1st
  • 2nd
  • 3rd
  • 4th

まとめ

かなり基本的な仕様から詳しく説明したつもりです。
cssって『結構使ってはいるけど、実は詳細仕様を理解していない』って方もいるかと思います。
その代表格がこの Flexbox あたりではないかと(笑
地味にプロパティとか似通っているし、単語も長いですし(笑笑
本来なら Flexbox に関する実践的な Tips 集的なものも書きたかったのですが、冗長になり過ぎたので気が向いたら、いつの日かまとめて書きたいと思います。

nanba
WRITER:nanba
高い技術力を誇る『NorthDetail』内では珍しい『チカラワザ系コーダー』
主な記事 一覧へ

一覧へ

IS 501383 / ISO 27001