かんたんCSS3 flex, サクッと並びとその方向を変える方法

CSS3では、フレックスを使ってたった2行でコンポーネントの並びを変えられます。

もう『inline-block』『float』を使いません。フレックスでは配置以外にもいろいろな設定ができます。

今回は、フレックスの基本になる『並びとその方向を変える方法』を説明します。

2018/12現在、ほぼすべてのブラウザで対応しているので心配ありません。わかりやすく手順を追って解説します。

これらの用語が分からない人は、まず『flexを使って自由に操ろう！』から見ると分かりやすいです。

flex-direction 並びの方向を指定する

フレックスでは、コンテンツの並びの方向が変えられます。

これを理解するには、フレックスのしくみを知らないといけません。図を見てください。

フレックスのしくみは2つの軸と軸のstart, endがあるだけで、並びの方向では、

を切り替えるだけで行われ、ひとつのプロパティで並びを変えるのでかんたん。

デフォルト指定も含めて4つ指定できます。そのすべてのパターンを見ていきましょう。

row 左 -> 右（デフォルト）

.container {
  flex-direction: row;
}

"display: flex"を指定するとアイテムが左から右に向かってヨコ並びになります。これはflex-directionがデフォルトで"row"になっているから。

デフォルトは『flexを使って自由に操ろう！』で見ることができるので省略します。残りの3つを見てみましょう。

row-reverse 右 -> 左

.container {
  flex-direction: row-reverse;
}

まずはサンプルを実行します。HTMLです。

<div class="sample">
<div class="container flex row-reverse">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>
</div>

CSSは、ボックスの見栄えを作ってフレックスのクラスを用意します。

.sample .container .box {
  background: rgba(255, 144, 130, 0.7);
  color: #fff;
  margin: 3px;
  padding: 0 3px;
  text-align: center;
}
.sample .flex {
  display: flex;
}
.sample .row-reverse {
  flex-direction: row-reverse;
}

HTMLの結果です。比較のためにrowも表示します。

右寄せでないことに注意。右寄せ + 右から左に向かってアイテムが配置されます。

（右寄せはjustify-contentプロパティを使います。）

かんたんCSS3 flex 左(上)・中央・右(下)に寄せて余白を操作する

tadtadya.com

比較のためrowも表示しておきます。

"reverse"を指定するとメイン軸のmain startとmain endが交代します。リバースの動きはこれだけ。

column 上 -> 下

.container {
  flex-direction: column;
}

次はタテに並べます。まずはCSSです。flex-directionのクラスを追加します。

.sample .column {
  flex-direction: column;
}

次にHTMLです。同じHTMLを使うと、アイテムが<div>なのでちがいが分かりません。<a>に変更します。

<div class="sample">
<div class="container flex column">
  <a class="box" href="https://sample/">1</a>
  <a class="box" href="https://sample/">2</a>
  <a class="box" href="https://sample/">3</a>
  <a class="box" href="https://sample/">4</a>
  <a class="box" href="https://sample/">5</a>
  <a class="box" href="https://sample/">6</a>
  <a class="box" href="https://sample/">7</a>
  <a class="box" href="https://sample/">8</a>
  <a class="box" href="https://sample/">9</a>
  <a class="box" href="https://sample/">10</a>
</div>
</div>

HTMLの結果です。

タテに並びました。アイテムにインラインがあるときに使えそうです。

比較のためrowの図も表示します。

row（デフォルト）からcolumnに変えると、メイン軸とクロス軸が交代します。

main startとcross start、main endとcross endも交代するので、アイテムの配置が上から下に変わります。

column-reverse 下 -> 上

.container {
  flex-direction: column-reverse;
}

今度はタテの並びで下から上に向かって配置します。

CSSに新たにクラスを追加します。

.sample .column-reverse {
  flex-direction: column-reverse;
}

HTMLはコンテナのクラスを変更します。

<div class="sample">
<div class="container flex column-reverse">
  <a class="box" href="https://sample/">1</a>
  <a class="box" href="https://sample/">2</a>
  <a class="box" href="https://sample/">3</a>
  <a class="box" href="https://sample/">4</a>
  <a class="box" href="https://sample/">5</a>
  <a class="box" href="https://sample/">6</a>
  <a class="box" href="https://sample/">7</a>
  <a class="box" href="https://sample/">8</a>
  <a class="box" href="https://sample/">9</a>
  <a class="box" href="https://sample/">10</a>
</div>
</div>

下から上に向かってアイテムが配置されました。

比較のためデフォルト（row）も表示します。（デフォルトからどう動くのか見るため。）

このようにデフォルトから変化して方向が変わります。

flex-flow ショートハンド

flex-directionプロパティは、アイテムの折り返しを指定するflex-wrapプロパティと、まとめて指定ができるショートハンドをもっています。

.container {
  flex-flow: <flex-direction> || <flex-wrap>;
}

.container {
  // 順序はどうでもいい
  flex-flow: wrap row; // row nowrapと同じ
}
.container {
  // flex-wrapの省略
  flex-flow: row; // row nowrapと同じ
}
.container {
  // flex-directionの省略
  flex-flow: wrap; // row wrapと同じ
}

かんたんCSS3 flex 1行に詰めたり折り返しを指定する

tadtadya.com

まとめ

フレックスを使ってコンテンツをかんたんに並べる方法をご紹介しました。そして、並びの方向を変える方法も解説しました。

フレックスのすごいところはこれだけではありません。まだまだほかにもあります。

ここで説明すると長くなるのでとりあえずここまでにします。

かんたんCSS3 ぜんぶ解説。誰でも分かるflexの使い方

tadtadya.com