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

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
翻訳はみつかりませんでした
css3 image
イラストACの画像をもとに加工しています。

CSS3では、フレックスでコンポーネントの並び方を変える方法がたった2行でできるようになりました。

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

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

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

  • flex
  • コンテナ
  • アイテム
  • メイン軸・クロス軸

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

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

フレックスでは、コンテンツの並びの方向を変えることができます。

これを理解するには、フレックスのしくみを知る必要があります。図を見てください。

css3 flex image

フレックスのしくみはこれだけです。

  • メイン軸 <-> クロス軸
  • main start

並びの方向はこの二つを切り替えるだけで行われています。1つのプロパティで並びを変えるのでかんたんです。

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

指定方法

  • 左 -> 右へヨコ並び(デフォルト)
  • 右 -> 左へヨコ並び
  • 上 -> 下へタテ並び
  • 下 -> 上へタテ並び

コンテナに指定します。

row 左 -> 右(デフォルト)

.container {
  flex-direction: row;
}

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

図で見たように、デフォルトはヨコに向かう方向が『メイン』です。だからflex-directionを指定しないと左から右に向かってヨコ並びになります。

アイテムの配置は、main startからmain endに向かって配置されます。これはほかの指定方法でも変わりません。

配置の方向は、main start, main endのポジションを変えることで行われます。

flex-direction row image

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

row-reverse 右 -> 左

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

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

ソースコードサンプルのボックスにタップやマウスを合わせると、右上にコピーボタンが出ます。

慣れないうちは、とりあえずコピー&ペーストで、自分で動かすところから始めると良いです。

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は、ボックスの見栄えを作ってフレックスのクラスを用意します。

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も表示します。

row-reverse
1
2
3
4
5
6
7
8
9
10
row
1
2
3
4
5
6
7
8
9
10

右寄せではないことに注意が必要です。右寄せ + 右から左に向かってアイテムが配置されます。(右寄せはjustify-contentプロパティを使います。)

メイン軸の方向が"row"で、矢印が逆に向く(reverse)ので"row-reverse"です。

flex-direction row-reverse image
row-reverse
flex-direction row image
row

"reverse"を指定すると、main startとmain endが交代します。たったこれだけの切り替えでリバースが行われます。

column 上 -> 下

.container {
  flex-direction: column;
}

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

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

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

HTML
<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の結果です。

HTML結果
1 2 3 4 5 6 7 8 9 10

タテに並びました。アイテムにインラインがある場合に使うことになりそうです。

flex-direction column image
column
flex-direction row image
row

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

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

メインがrowから切り替わるので、"column"です。

フレックスは、ヨコ向きをrow、タテ向きをcolumnと呼びます。テーブルのrow(行)・column(列)と同じです。

column-reverse 下 -> 上

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

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

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

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

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

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>
column-reverse
1 2 3 4 5 6 7 8 9 10
column
1 2 3 4 5 6 7 8 9 10

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

メイン軸の方向が"column"で、矢印が逆に向く(reverse)ので"column-reverse"です。

flex-direction column-reverse image
column-reverse
flex-direction row image
  • row -> column。メイン軸とクロス軸が交代
  • column -> column-reverse。main startとmain endが交代

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

flex-flow ショートハンド

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

コンテナに指定します。

.container {
  flex-flow: <flex-direction> || <flex-wrap>;
}
初期値row nowrap
||半角スペース区切り。順不同。1つ指定可

.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を使ってコンテンツを自由に操ろう!
かんたんCSS3 flex 1行に詰めたり折り返しを指定する
次のページ
HTML&CSSの本
post-cta-image

どうしてもインターネットで調べて勉強するのが苦手という人のために、HTMLとCSSの最新技術と基本を網羅できる本を2冊選びました。

この内容を身につければ、ほかの本は必要ありません。将来的には、自分の力で、書籍を使わずに、インターネットにある情報だけで学べます。


HTML&CSSの本2選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!