BLOG ブログ

2015.02.13

css3のflexboxが便利だ~、今までfloatしたりinlineにしたり、アレしたりコレしたりしてた事が簡単にできる

要素を横並びにするにはいくつか方法があります。

  • 要素をfloatする
  • 要素をinline(又はinline-block)にする
  • 要素をtable-cellにする

今までは上記の方法でやっていました。

今回、もう一つ方法があることを知りました。

CSS3の「display:flex;」というもので、並べたい要素の親要素に指定します。

display:flex;は、ただ横に並べるだけでなく、【flex-direction】、【justify-content】、【align-items】といったプロパティを指定することで、右から左・下から上など逆方向に並べたり、要素を等間隔に並べたりすることが出来ます。

表示順を指定することも出来るので、レスポンシブサイトにも適していると思います。

kato

このブログを書いた人

酉年生まれのせいか、話を聞いても3歩歩けば忘れます。 こんな私ですが、よろしくお願いします。

RELEVANCE 関連記事

Google Analytic

「今月のアクセス数めっちゃ増えてる!!」 アクセス数が増えると嬉

お問い合わせ TOPへ