プログラミング備忘録

忘れない様にメモ

*

cssでテーブルレイアウト多段組

      2015/08/06

cssでテーブルレイアウトをする。

display:table
display:table-cell
を使う。

すべて横1行に並んでしまうので、メニューにしか使えない。

きれいに多段組にするには、
display: flex
flex-wrap: wrap;(子要素の折り返し設定)
wrap → 折り返す
nowrap → 折り返さない
justify-content: space-between;(水平方向の揃え方)
space-between → 均等に間隔を空ける

これだと、子要素は基本何もしなくてよい。
参考
CSS3のFlexboxを使っている。
解説
ブラウザ、スマフォに対応

この記事は役に立ちましたか? はい いいえ 0人中0人が役に立ったと言っています。

 - CSS