ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

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

css3 image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

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

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

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

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

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

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

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

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

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

flex メイン画像
flexのしくみ

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

  • メイン軸とクロス軸
  • main start

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

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

指定方法

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

コンテナに指定します。

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

.container {
  flex-direction: row;
}

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

flex-direction: row 画像
flex-direction: rowのしくみ

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

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

配置の方向は、main start, main endのポジションを変えて行ないます。

デフォルトは『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 画像
flex-direction: row-reverseのしくみ

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

flex-direction: row 画像
flex-direction: 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 画像
flex-direction: columnのしくみ

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

flex-direction: row 画像
flex-direction: 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 画像
flex-direction: column-reverseのしくみ

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

flex-direction: row 画像
flex-direction: rowのしくみ

デフォルトからの変更点

  • 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冊選びました。

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

コメントを残す

*