Flexbox - 面倒なfloatから脱却しよう -

TOP
コラム
Flexbox - 面倒なfloat

Flexboxを使ってコンポーネントを横並びにしよう！

はじめに

floatを使ったWEBサイト制作は、なんだか難しい...

表題の通りのことを考えている方は多いのではないでしょうか？HTMLやCSSを学習して、お洒落なWEBサイトを自分で作って色々な人に見てもらいたい！魅力的なサイトを作りたい！...そう思ってはいるものの、実際に制作を行ってみるととても大変で、挫折をしてしまったという人も少なくはないと思います。

「写真を並べたいだけなのに細かくCSSを書いていくのは時間がかかるし面倒」、「positionが全然わからないので、floatやabsolute、relativeなどの関係性が全くイメージできない」、「画面のレイアウトをどのように設計していけばいいのかがピンとこない」、「できるだけ早く制作したいのに、もっと楽に作りたい！」など...マークアップがあまり得意ではない学びはじめの人にとっては、このように途中で投げ出したくなってしまいかねない事態にもなっています。

floatなんて考えないで画像を横に並べられるような、もっと楽な仕組みがあればいいのに...!

そのような人のために、"Flexbox" を是非とも使っていただきたいと思います。

本記事では、Flexboxというものがどういう特徴を持っていて、どのように活かしていけるかを解説いたします。

この記事は、ある程度HTMLやCSSはわかるものの、実際にWEBサイトを解説サイトや見本などを何も見ないで作ろうとすると何をして良いのかがわからない人や、floatを使ったWEBサイトの構築に苦労している方、複雑なWEBサイトの実現はできないので、せめてもの最低限として見られるようなデザインのWEBサイトを作れるようになりたい、という人には是非ともオススメです。今までfloatを使ってWEBサイトを作ってきたが、Flexboxを新たに学習したいという方にもオススメです。

逆に、HTMLやCSSという言葉にすらピンとこないという完全なる初学者であるという段階の方はFlexboxの話をしても理解が大変だと思います。まずProgateなどでHTMLやCSSの基礎的な部分を学習することをお勧めします。

そもそも Flexbox とはなんだろう？

CSS3から追加された機能の1つ

Flexboxとは、CSS3で追加された新しいCSSの機能です。

今までWEB制作を行うにあたっては"float"を使ってきました。ページ内に必要なコンポーネントを横並びにする、中央に寄せる、左右に寄せるなどの基本的な配置を行うために、要素にdisplay:floatを指定することでその要素を「宙に浮かせる」ような状態にして(親要素の管理下からいったん外れたような状態にさせる)から、要素を操作する必要がありました。しかしながら、floatを使ったマークアップを行う場合は、overflow:hiddenを使って要素の回り込みを防止しなければならなかったり、空のタグとcleatを使ってfloatを解除する手間があったり、clearfixを用いるなど様々な方法こそありますが、単純にfloatを指定するだけではうまくいかないのです。

こうなると、初心者にとっては何が何だかわかりません。ただ要素を並べたいだけなのに、このような手間を負う必要があり非常に大変です。

そんな時にFlexboxが登場しました。

Flexboxでは、コンポーネントを横並びにする、中央に寄せるといった基本的な操作から、「等間隔に配置する」、「端の要素だけ親要素の端に配置した上で等間隔に配置する」、「基準のラインに沿って要素の高さを揃える」といったことが可能です。floatで必要だった細かな作業の手間がなくなり、非常に扱いやすいものです。

極端に言えば、floatを使って表現できていたものは大体Flexboxで対応することが可能であると言えるほど便利な新機能だということです。

Flexboxを使ってみよう

早速Flexboxを使ってみましょう。Flexboxは「Flexアイテム」と呼ばれる子要素(並べたいパーツやコンポーネントのこと)を、「Flexコンテナ」と呼ばれる親要素の中に入れる構成になっています。そのため、並べたいパーツを囲い込むようにdivタグなどで囲い込みましょう。

そして囲い込んだ親要素に対して、CSSで「display: flex」を指定するだけで準備完了です。

＜div class="flex--container"＞
＜div class="flex--item"＞子要素１＜/div＞
＜div class="flex--item"＞子要素２＜/div＞
＜div class="flex--item"＞子要素３＜/div＞
＜/div＞

.flex--container {
display: flex;
}

もうこれだけで、並べたい子要素たちが横に並んでいることが確認できるでしょう。とても簡単ですね。

親要素であるFlexコンテナにプロパティを指定しよう

Flexboxではdisplay: flex;に加えて、親要素に対して様々なプロパティを付与することで子要素の配置を色々と設定することができます。Flexboxを使う時には、基本的にはこの親要素用のプロパティを合わせて指定する方法が取られます。よく使う物に関してはこの機会に覚えてしまうと良いでしょう。

子要素の配置順序を指定する ~ flex-direction ~

flex-directionを指定することで、子要素を左から右に並べたり、右から左へと並べたり、上下の並ぶ順番を逆転させたりすることが可能です。

// CSS

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

flex-directionの後には、"row"、"row-reverse"、"column"、"column-reverse"のどれかを指定することで、子要素の配置順序を決定します。

row : 左から右(通常通り)
row-reverse : 右から左
column : 上から下
column-reverse : 下から上

初期値はrowです。こちらはイメージしやすいのでは無いでしょうか？

子要素を1行にするか折り返すか ~ flex-wrap ~

flex-wrapを指定することで、子要素を並べた時に1行でずらりと並べるのか、複数行になるように折り返して並べるのかを決定できます。

1行に並べるということはあまりイメージできないかもしれませんが、これは「親要素のコンテナをはみ出すことを許容する」ということです。Flexコンテナの枠組みをお構いなしで子要素が並んでいくため、ページの横幅いっぱいの親要素であれば横にスクロールが生まれる不格好なページになってしまいます。そのためよく使うことになるプロパティです。

一方で、複数行になるように指定した場合、親要素の横幅をオーバーした分は次の行へ折り返されます。

nowrap : 1行に並べる(通常通り)
wrap : 親要素の横幅をオーバーした時、それ以降は折り返され複数行になる。
wrap-reverse : 親要素の横幅をオーバーした時、それ以降は折り返され複数行になる。その子要素は下から上へ並ぶように折り返される。

flex-flow

flex-directionとflex-wrapはまとめて書くことが可能です。慣れてきたら使ってみましょう。

flex:flow: column wrapといったように、flex-firection flex-wrapの指定方法をまとめて書きます。

横に並べる際の間隔を決定する ~ justify-content ~

justify-contentを指定することで、子要素を並べる際に横にどのような間隔を開けて並べるのか、あるいは中央に寄せるのか...といった配置の方法を指定することができます。

flex-directionでrow-reverseを指定したときは、子要素を1つずつ右から並べるイメージでしたが、こちらの右寄せでは、子要素を塊として考えてそのまま右に寄せるイメージです。(要素の並び順が変わらない。)

ナビゲーションバーの配置など、子要素同士をくっつけて並べたく無いという場合も多いために使用頻度が高いです。覚えておきましょう。

flex-start : 左に揃える(通常通り)
flex-end : 右に揃える
center : 中央揃え
space-around : 子要素を等間隔で配置する。
space-between : はじめに最初と最後の子要素を、親要素の両端に配置する。その後、間隔が同じになるように残りの要素を配置する。

注意点としては、これらは親要素の横幅に余りが存在しなければ活用することができません。

縦に並べる際の間隔を決定する ~ align-items ~

align-itemsを指定することで、子要素を縦のどの位置に配置し並べるのかを指定することができます。中央寄せをしたり、上や下に揃えて並べたりして使います。初めのうちはjustify-contentを縦にしたものだと考えると良いかもしれません。

こちらも親要素の中央に寄せて並べる使い方をするなど、使用頻度が高いので覚えておくと良いでしょう。

stretch: 親要素の高さに合わせて引き伸ばす
flex-start : 上に揃える
flex-end : 下に揃える
center : 中央揃え

子要素に指定するプロパティ

基本的にFlexboxは親要素にプロパティを指定しますが、ある子要素だけを操作したいといった特別な場合に、子要素に対して指定できるプロパティというものが存在します。

よく使われる親要素への指定とは異なり、一般的なランディングページであれば子要素が一つだけ異なる設計で作るということはあまり無いため、「子要素に指定できるプロパティがある」ということを覚えておいて、必要になった場合に調べて使うという使用方法で十分でしょう。ですからここではあえて紹介しません。自分で調べることも大切だと思いますよ。

いかがでしたか？

とても簡単に使えるFlexboxを利用しないのがもったいないくらいだと言うことがみなさんにもこれでよくわかったのではないでしょうか？ただ慣れるまでは何がどの動きをするのか掴みにくいところもあると思います。色々試しながら慣れていきましょう。