display: table;での要素の並び替えについて

使い方

横並びにしたい子要素を持つ親要素にdisplay:table;を記述し、子要素にdisplay:table-cell;を記述することで適用させることができる。
内容はhtmlのtable要素を使用したテーブルレイアウトと同じでcssでできるようにしたものです。
高さを揃えた横並びのレイアウトや、縦方向の中央揃えがより簡単にできるようになる。

コードの例

ruby.rb

<div class="parent>
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
</div>

sample.css

.parent {
  display: table;
  width: 100%;
  border: 2px solid red;
  margin-top: 10px;
}
.child {
  display: table-cell;
  border: 1px solid blue;
}

display: table;は指定した要素分しか幅を広げないため、width100%と記述するなどして調整してあげると良い