もう迷わない!CSS3のFlexboxで手軽にレイアウト

  • このエントリーをはてなブックマークに追加
  • Pocket

みなさま、こんにちは!エンジニアの東です。

フロントエンドの開発は不慣れな私はCSSの扱いもまだまだ未熟です。

というのも、私は、自身の業務では、CSSはなかなか触る機会がないです。

それもあって、私はCSSには苦手意識がありまして・・・特にfloatの扱いがうまくできないんですよね・・・!floatを使ってコンテンツを配置しようとすると大体レイアウトが崩れて、混乱します。

そんな私でも、floatの代替として使える非常に便利なものがありましたのでそちらを紹介したいと思います。

それは、CSS3 Flexbox

今回、こちらについて紹介したいと思います。

CSS3 Flexbox

CSS3のFlexboxとは、Flexible Box Layout Moduleとよばれ、
水平方向あるいは垂直方向に配置される要素のポジションニングを行うための方法です。

ちなみに、CSS3のFlexboxが使えるブラウザは、
http://caniuse.com/#search=flexbox
にて、確認できます。

日本ではIE11が16.76%ものシェアとなっており、部分的サポートのため、バグもあるとのこと。
PCで安心して使うためにはもう少し待つ必要がありそうですね…

ですが、Flexboxは非常に扱いやすいです。

弊社のディレクターは、社内勉強会にて、HTMLとCSSで簡単なサイトページを自ら作るという研修があったので、
その時に、私がサポートした方には、紹介したのですが、初心者でも、ポイントさえ押さえれば非常に使ってが良く、レイアウトが簡単にうまくできちゃいます。

上記のソースでの表示は、
before

縦にただならんだだけになっていますが、

ここでcssをうまく指定してあげるだけで、

flex-1

綺麗に整列させられます。

ポイントは親要素と子要素

要素をFlexboxにするポイントは、親要素と子要素にCSSをちょちょっと設定してあげることです。

親要素は子要素がどのような配置になってほしいか、そして、子要素は、子要素自身が並びや自身の大きさ、位置がどういう具合で配置されたいかを指定してあげるだけです。
(今回はベンダープレフィックスは省いて紹介します。)

親要素

  • Flexboxにする大事な指定
    • display: flex | inline-flex
  • 子要素がどう並ぶかを決める
    • flex-flow: <flex-direction> || <flex-wrap>
      1. flex-direction : raw | column | raw-reverse | column-reverse
      2. flex-wrap : nowrap | wrap | wrap-reverse
  • 配置方向の要素への指定
    • justy-content : flex-start | flex-end | center | space-between | space-around
  • 配置方向とは垂直の要素への指定
    • align-items : flex-start | flex-end | center | baseline | stretch
  • 子要素全体のまとまりをどういう配置にするか
    • align-content : flex-start | flex-end | center | space-between | space-around | stretch

子要素

  • 並び順
    • order: <integer>
  • 自身の大きさ (grow: 他のアイテムとの大きさの比率、shrink: 許容縮小サイズ、basis: 基準のサイズ、)
    • flex: <flex-grow> || <flex-shrink> || <flex-basis>
      1. flex-grow : <number>
      2. flex-shrink : <number>
      3. flex-basis : <number>
  • 自身の配置
    • align-self : auto | flex-start | flex-end | center | baseline | stretch

参考(https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/)

Flexboxを使えば配置が簡単!!

そして、よくあるPCサイトの作りである、
ヘッダー、フッター、左サイドメニュー、右サイドメニューの配置も、
flexboxをつかえば簡単に実現可能です!

pc

最後に

いかがだったでしょうか。float使わずでも簡単にレイアウトが組めました。
親と子に対してflexのルールに沿った指定をしてあげるだけなので簡単です。
特に子の要素が増えたり減ったりするコンテンツに使えると思います!

是非、試してみてください!

Wedding Parkでは一緒に技術のウエディングパークを創っていくエンジニアを募集しています。
興味のある方はぜひ一度気軽にオフィスに遊びにきてください。

IT×ブライダルで業界を変える!プロフェッショナルなWEBエンジニア募集!

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください