きまぐれ引きこもりんご80%

【Flexbox】並べる方向 〜flex-direction編〜

web制作

カンタン!便利!Flexbox 〜flex-direction編〜

web制作の現場で、お見かけする頻度も高くなってきたFlexbox。
私は、まだまだ手っ取り早くfloatを使用することも多いのですが、Flexboxは覚えておくと便利ですし、今どきのブラウザーであれば問題なく使うことが出来るので、どんどん使っていきたい技術ですよね。
というわけで、今回から数回に分けてFlexboxについて、私なりに備忘録しようと思います。

flexboxのメリット

flexboxには色々と便利な点があるのですが、私が感じた主なメリットは以下の点です。

  • boxの高さが揃う
  • 上下左右の順序を簡単に並び替えることができる
  • 中央揃えも簡単にできる(上下中央揃えに関しては過去記事参照
  • clearfixがいらない

上記の点だけを見ても、floatと比べるとflexboxを使う価値はありますね。
では、どのように実装していくのか。
まずは、HTML部分から見ていきましょう。
floatの場合、clearfixを考慮しなければ、配置する要素を直接、float:right; float:left; で指定していましたね。
一方、flexboxの場合、配置する対象に直接指定するのではなく、対象の要素をwrapperで囲みます。(このwrapperのことをFlexboxコンテナーと呼びます。)
大まかなレイアウトは、このFlexboxコンテナーに指定していくことになります。
ちなみに、Flexboxコンテナーでwrapされたレイアウト対象のことを「Flexboxアイテム」と呼びます。

図にするとこんな感じです。

flexbox

では実際の例でHTMLからみていきましょう。
FlexboxアイテムをFlexboxコンテナーで囲みます。

<div class="flex-container">
  <div class="flex-item">box1</div>
  <div class="flex-item">box2</div>
  <div class="flex-item">box3</div>
  <div class="flex-item">box4</div>
  <div class="flex-item">box5</div>
</div>

CSSで体裁を整えます。

.flex-item {
  width: 100px;
  height: 100px;
  background: orange;
}
.flex-item:nth-of-type(odd) {
  background: gold;
}

今までなら、上記HTMLのboxをfloatで横並びにする場合、.flex-containerclearfixしてboxをfloat:right;なりleftなりしていたかと思います。
では、Flexboxの場合はどうするのか?
実に簡単です。
Flexboxコンテナーに対してdisplayプロパティを用いてflexを指定するだけです。(※インライン要素の場合、inline-flexを用いる)

.flex-container {
  display: flex;
}

See the Pen flex by ossan (@g3) on CodePen.

これだけで、レイアウト対象の要素に一切cssを指定せずとも横並びになりましたね。
でもこれだとfloatと比べてそんなに恩恵を感じることがありません。実はFlexboxの便利さはflex-directionプロパティを用いることによって発揮されます。

flex-directionで子要素の並びを自由自在

flex-directionプロパティは子要素の配置方向を指定することが出来ます。
では、具体的にどのような配置ができるのか見ていきましょう。

row(初期値)

Flexboxアイテムが横並びになります。rowは初期値になるので省略してもかまいません。

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

See the Pen flex-direction-row by ossan (@g3) on CodePen.

row-reverse

Flexboxアイテムがrowの逆方向に並びます。

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

column

Flexboxアイテムが縦並びになります。

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

See the Pen flex-direction-column by ossan (@g3) on CodePen.

column-reverse

Flexboxアイテムがcolumnの逆方向に並びます。

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

See the Pen flex-direction-column-reverse by ossan (@g3) on CodePen.

marginで調整する

Flexboxアイテムのmarginを調節することでレイアウトの調整も出来ます。

.flex-item:first-of-type {
  margin-right: auto;
  background: red;
}

See the Pen flex-margin-auto by ossan (@g3) on CodePen.

といっても、marginだけでレイアウトの調整をするのもキツイですし、
もっと簡単にできるプロパティもあります。
その続きは、また次回以降で。