レンタルサーバー比較メモ

レンタルサーバーメモブログ

 

display:flexでカラムの並び順を指定する

   

カラムの並び順を指定しようとしてdisplay:boxがFirefoxで効かない!を参照したのですが、boxというのが古いらしくflexというのが新しいみたいなのでメモっておきたいと思います。

display:flexでカラムの並び順を指定して縦に表示する方法

display:flex;とcssに記述するだけでは横並びになってしまいます。

縦に表示するためにはcssにちょこっと記述すれば縦に表示されます。

HTML

<div id="wrapper">
  <div id="title_name">タイトルです</div>
  <div id="date">日付だよ</div>
  <div id="content">コンテンツ(記事)だお</div>
</div>

CSS

#wrapper{
  display:-webkit-flex;
  display:-moz-flex;
  display:-ms-flex;
  display:flex;
  flex-flow: column;/* 縦並びにする記述 */
}
/* 「order」で表示させる順番を指定します */
#title_name{order:1;}
#date{order:3;}
#content{order:2;}

flexはboxに比べて記述することが少なくて済むのが魅力的ですね。

便利になるに連れて覚えることが増えていくのが、辛いところですが・・・
(^ ^;

 - CSS

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

no image
display:boxがFirefoxで効かない!

display:boxを利用するとfloatを利用しなくても横並びができるという …