WEB制作

2015-02-13(Fri)

Atsuko

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

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

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

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

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

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

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

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


このブログを書いた人

Atsuko

実はJavascriptとか会社入るまでやったことなかったことは内緒です。
酉年生まれのせいか、話を聞いても三歩あるけば忘れます。

最近書いた記事

関連する記事