【webデザイナーもスグに使える】整列ツール風に覚えるFlexbox

「webデザインでは配置ってカンタンにできるのに、コーディングだと思うようにいかない。」コーディングをするときにfloatをつかう人はその仕様に悩まされ、もう少し気持ちよくレイアウトをしていきたいと考える方は多いのではないでしょうか。

そこで今回は、CSS3のプロパティでおさえておきたいレイアウトプロパティ「Flexbox」についてお話します。使いやすく柔軟性にすぐれたプロパティを、デザイナーがよく使う整列ツールによせて例えてみました。頻出度の高いものから使い倒し、Flexboxの良さを実際に感じてみてください。

Flexboxは、displayプロパティのひとつである

まずFlexboxをつかうためには、親要素に対してdisplay: flex;もしくはdisplay: inline-flex;を指定することが基本となります。

とても簡単ですね。

通常displayプロパティは、blockやinline-blockなどで指定し、レイアウトのコントロールの手段として使用されます。それをもう一歩、柔軟(フレキシブル)にしたプロパティがFlexbox。指定した親要素は『Flexboxコンテナー』として認識され、あとに続く子要素が『Flexboxアイテム』に変化し、いろいろなFlexboxプロパティでレイアウトが組めるようになるのです。

イメージとしては「display: flex;で柔らかく下ごしらえをしたら、Flexboxのプロパティ(調味料)で味付けしていく。」と考えれば良いでしょう。

Flexboxプロパティには、いろいろなものがある

柔軟なレイアウトプロパティであるFlexboxには、豊富な種類のプロパティがあります。
側面に揃えたり、中央に配置したり、均等にならべたり、ときには反転させたりすることもできます。とすると、まず一歩おさえておきたい大切なポイントが、基準となるものを決めるという考え方です。

ベクトルと位置の決定

Flexboxはベクトル(方向性)と軸(垂直・水平)の世界で基準が生まれます。

①ベクトル(主軸):flex-direction;
②位置(交差軸):align-items:(垂直:縦)/justify-content;(水平:横)

①と②の基準を決めることで、配置をコントロールできるようになります。
では、具体的に例をあげて説明していきます。

【左を基準に並べる】flex-direction: row;
【右を基準に並べる】flex-direction: row-reverse;
【上を基準に並べる】flex-direction: column;
【下を基準に並べる】flex-direction: column-reverse;
※reverseがついた場合、「反対から」という考えて使うとよいでしょう。

上記の画像のように数字部分に注目すると分かりやすいのですが、上下左右のいずれかを基準にして並べるベクトル(方向性)を決めていきます。正しくは主軸を決定するとも言います。

例）