BLOG

2016年10月26日/ Flexbox,

CSSのfloatを使わずに、Flexboxを使用してWebサイトを作った話

今回新規事業のサービス立ち上げに伴い、下記webサイトを作成しました。

スタートプログラミング
スタートプログラミング “未来のITエキスパートを育てる、プログラミングスクール”

このサイトにはfloatプロパティを一切使用していません。
Flexboxプロパティのみを使用し実装しました。
今回はこのFlexboxについて簡単にまとめてみました。

#Flexboxとは?
Flexbox(可変ボックス)とはCSS3から登場したレイアウトモジュールになります。
横並びを実現するだけではなく、上下中央揃えやレスポンシブ化も簡単に実装できます。

*MDNのflexbox説明ページ

boxを並べてみる

実際にこの2つのボックスを並べてみました。

横並びの2つのbox

ソースコード

親要素にdisplay:flexを指定しただけになります。
これで、子要素が可変ボックス(正確にはwidthを指定しているので可変ではないです)になりました!
floatでは回りこみなども考えないといけないので、楽ですね。

boxを均等に並べてみる

親要素にwidth:300pxを指定し、子要素を300pxの中で均等に配置しました。

300pxの中で均等に横並びになった2つのbox

ソースコード

親要素にwidth:300pxを指定し、幅を指定。
そのあとに、親要素にjustify-content: space-between;を指定し、均等に配置しました。

このjustify-contentプロパティは非常に優秀で、以下の指定ができます。

・ justify-content: space-between
 均等に配置

・ justify-content: space-around
 均等に配置し、先端・終端には余白を設ける

・ justify-content: flex-start
 左詰めで配置

・ justify-content: justify-content: flex-end
 右詰めで配置

・ justify-content: center
 中央に配置

boxの中の文字を上下揃えにする

position: absoluteを使わずに、上下揃えを実装しました。

中の文字が上下揃えになった2つのbox

ソースコード

今まで子要素だったchildrenが文字の親要素になるためdisplay: flex;スタイルを付与しました。(クラス名がchildrenなのに親要素になったのは華麗にスルーしてくださいw)
このchildrenにもう一つalign-items: center;を実装するだけで、上下揃えが実装できます。
position: absoluteを使うと色々面倒なことになりますが、簡単に実装できました。

このalign-itemsプロパティは他にも以下の指定ができます。

・ align-items: center
 上下中央に配置

・ align-items: stretch
 親要素内いっぱいに表示

・ align-items: flex-start
 上揃えに配置

・ align-items: flex-end
 下揃えで配置

・ align-items: baseline
 ベースラインで配置

boxの中の文字を上下左右中央揃えにする

align-itemsjustify-contentを同時に使用して、文字を上下中央揃えにしました。
文字が上下左右中央揃えになった2つのbox

ソースコード

上下揃えに使用したalign-items: center;と左右中央揃えができるjustify-content: centerを同時に使用しました。
これでわずか数行で簡単に上下左右揃えができました!!

ブラウザのサポート状況

ブラウザのサポートが確認できるCan I Useではこのようになっています。
Flexboxのブラウザ動作状況一覧

IEが・・・となる方も中にはいらっしゃるかもしれませんが、一応flexibilityを使用すれば動作します。
しかし、念をおしてIEの8,9に対応しないといけない場合は、諦めましょう。

正常なブラウザなら、ちゃんと動作しますが、念のためにベンダープレフィックスを付与するのが、懸命です。gulpなどを使用すれば、ベンダープレフィックスの実装が自動化できるので便利なものはどんどん使いましょう!!
参考記事:CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入とお薦め設定

Flexboxを学ぶのにオススメのサイト

今回はFlexboxについて簡単に、説明させていただきました。
ですが、まだまだ便利な機能やプロパティがあり、きちんと勉強することで、バグの無い便利な実装ができます。
以下のサイトがオススメなので是非ご覧ください。

CSSレイアウトにfloatはもう古い! Webデザイナー初心者でも始められるFlexbox入門 – ICS MEDIA

CSS3のFlexboxを基本から理解して、使い倒そう! – LIG

CSS Flexboxの勉強に最適!コピペですぐに使えるレイアウトやコンポーネントを実装するコードのまとめ – coliss

これからのCSSレイアウトはFlexboxで決まり! – クリエイターボックス

Flecbox以外にも便利な物はたくさん出てきています。
フロントエンドの流行の流れはとても早いですが、便利ならどんどん採用して、開発効率をあげていくべきなので、是非今回Flexboxを初めて知った方は使用してみてください!

Resent Posts

Category