Flexの使い方

CSSのフレックスボックスを使って、レスポンシブデザインの画面を作成する方法をご紹介します。

flex-direction

flex-directionは、フレックスボックスを並べる方向を指定するCSSプロパティです。

flex-direction
値 説明
row 水平方向（左から右へ） ※デフォルト値
row-reverse 水平方向（右から左へ）
column 垂直方向（上から下へ）
column-reverse 垂直方向（下から上へ）

厳密に言えばdirプロパティに影響を受けるのですが、右から左へと書く言語（アラビア語やヘブライ語など）でなければ無関係なので、ここでは割愛します。

デフォルト

デフォルトでは、フレックスボックスを左から右へ並べます。つまり、「flex-direction:row;」と同じです。

<div style="display:flex;">
  <div style="flex:auto;">A</div>
  <div style="flex:auto;">B</div>
  <div style="flex:auto;">C</div>
</div>
A
B
C

row

フレックスボックスを左から右へ並べます。

<div style="display:flex; flex-direction:row;">
  <div style="flex:auto;">A</div>
  <div style="flex:auto;">B</div>
  <div style="flex:auto;">C</div>
</div>
A
B
C

row-reverse

フレックスボックスを右から左へ並べます。

<div style="display:flex; flex-direction:row-reverse;">
  <div style="flex:auto;">A</div>
  <div style="flex:auto;">B</div>
  <div style="flex:auto;">C</div>
</div>
A
B
C

column

フレックスボックスを上から下へ並べます。

<div style="display:flex; flex-direction:column;">
  <div style="flex:auto;">A</div>
  <div style="flex:auto;">B</div>
  <div style="flex:auto;">C</div>
</div>
A
B
C

column-reverse

フレックスボックスを下から上へ並べます。

<div style="display:flex; flex-direction:column-reverse;">
  <div style="flex:auto;">A</div>
  <div style="flex:auto;">B</div>
  <div style="flex:auto;">C</div>
</div>
A
B
C

縦並びと横並びの切替

スマホのように画面幅が狭いデバイスでは縦並び、パソコンのディスプレイのように画面幅が広いデバイスでは横並びにするには、メディアクエリを利用する。

レスポンシブWebデザインにおいてはスマホファーストが好ましいため、デフォルトのレイアウトを縦並びにして、一定の画面幅以上の場合はメディアクエリで横並びにする。

.flexcontainer {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width:768px){
  .flexcontainer {
    flex-direction: row;
  }
}

<div class="flexcontainer">
  <div style="flex:none;width:300px;border:1px solid gray">A</div>
  <div style="flex:none;width:300px;border:1px solid gray">B</div>
  <div style="flex:none;width:300px;border:1px solid gray">C</div>
</div>

上記の CSS 及び HTML は以下のように表示される。

A
B
C

JavaScript

JavaScriptからはHTMLElementインタフェースのstyleプロパティから参照できる。

<fieldset>
  <input type="radio" name="fd" onchange="flexDirection('row');" checked>row</input>
  <input type="radio" name="fd" onchange="flexDirection('row-reverse');">row-reverse</input>
  <input type="radio" name="fd" onchange="flexDirection('column');">column</input>
  <input type="radio" name="fd" onchange="flexDirection('column-reverse');">column-reverse</input>
</fieldset>
<div style="display:flex; flex-direction:row;" id="fc">
  <div style="flex:auto;">A</div>
  <div style="flex:auto;">B</div>
  <div style="flex:auto;">C</div>
</div>
<script>
  function flexDirection(fd) {
    document.getElementById("fc").style.flexDirection = fd;
  }
</script>
flex-direction
A
B
C

flex

CSSのflexプロパティは、フレックスコンテナの大きさに合わせてフレックスボックスの拡大や縮小を行うかどうかを指定します。

flex
値 縮小 拡大
auto ✓ ✓
initial ✓ ✗
none ✗ ✗

auto

flex:auto はフレックスコンテナの大きさに合わせてフレックスボックスの拡大や縮小を行います。

<div style="display:flex;">
  <div style="flex:auto;">A</div>
  <div style="flex:auto;">B</div>
  <div style="flex:auto;">C</div>
</div>
A
B
C

ウェブブラウザのサイズを変更すると、フレックスボックスの大きさが変わります。

initial

flex:initial はフレックスコンテナの大きさに合わせてフレックスボックスの縮小を行います。

フレックスボックスを縮小しないときの大きさを、widthおよびheightプロパティによって指定する必要があります。

<div style="display:flex;">
  <div style="flex:initial;width:300px;">A</div>
  <div style="flex:initial;width:300px;">B</div>
  <div style="flex:initial;width:300px;">C</div>
</div>
A
B
C

ウェブブラウザのサイズを小さくしたり、スマートフォンでこの画面を見ると、フレックスボックスが縮小されます。

none

flex:none はフレックスコンテナの大きさに合わせてフレックスボックスの拡大や縮小を行いません。

フレックスボックスの大きさが固定されるので、widthおよびheightプロパティによって大きさを指定する必要があります。

<div style="display:flex;">
  <div style="flex:none;width:100px;">A</div>
  <div style="flex:none;width:100px;">B</div>
  <div style="flex:none;width:100px;">C</div>
</div>
A
B
C

ウェブブラウザのサイズを変更しても、フレックスボックスの大きさは変わりません。

関連記事

Tailwind CSSのフレックス・ボックス

参考文献

World Wide Web Consortium (2018) CSS Flexible Box Layout Module Level 1