CSS flex-direction

CSS の flex-direction は、フレキシブルボックスのコンテナ内にアイテムを並べる方向を指定するプロパティです。スマホの画面では縦並び、パソコンの画面では横並びのレイアウトにすることができます。

構文

flex-direction: value

値

以下に示す値を flex-direction に指定できる。

value
値 説明
row 水平方向（左から右へ）
row-reverse 水平方向（右から左へ）
column 垂直方向（上から下へ）
column-reverse 垂直方向（下から上へ）

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

初期値

row

使用例

フレキシブルスボックスにおいて、コンテナ内にアイテムを左から右へ並べる。

<div style="display:flex; flex-direction:row;">
  <div style="flex:auto; border:1px solid gray;">A</div>
  <div style="flex:auto; border:1px solid gray;">B</div>
  <div style="flex:auto; border:1px solid gray;">C</div>
</div>
A
B
C

フレキシブルスボックスにおいて、コンテナ内にアイテムを右から左へ並べる。

<div style="display:flex; flex-direction:row-reverse;">
  <div style="flex:auto; border:1px solid gray;">A</div>
  <div style="flex:auto; border:1px solid gray;">B</div>
  <div style="flex:auto; border:1px solid gray;">C</div>
</div>
A
B
C

フレキシブルスボックスにおいて、コンテナ内にアイテムを上から下へ並べる。

<div style="display:flex; flex-direction:column;">
  <div style="flex:auto; border:1px solid gray;">A</div>
  <div style="flex:auto; border:1px solid gray;">B</div>
  <div style="flex:auto; border:1px solid gray;">C</div>
</div>
A
B
C

フレキシブルスボックスにおいて、コンテナ内にアイテムを下から上へ並べる。

<div style="display:flex; flex-direction:column-reverse;">
  <div style="flex:auto; border:1px solid gray;">A</div>
  <div style="flex:auto; border:1px solid gray;">B</div>
  <div style="flex:auto; border:1px solid gray;">C</div>
</div>
A
B
C

縦並びと横並びの切替

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

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

<head>
  <style>
    .flexcontainer {
      display: flex;
      flex-direction: column;
    }
    @media screen and (min-width:768px){
      .flexcontainer {
        flex-direction: row;
      }
    }
  </style>
</head>
<body>
  <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>
</body>

上記の 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

関連記事

参考文献

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