この記事は覚え書きの殴り書き・メモです。
説明としては不十分で、解釈の間違いなども十分に考えられますのでご注意ください

CSSでカラムを組む方法というと、パッと3種類が浮かびます。
・float:leftとclear:left
・display:inline-block
・table
ただどれもちょっとずつ癖があって、毎度どう実装するか頭を抱える部分だったりします。
具体的に言うと以下の例です。

■float

・親要素にoverflow:hiddenを当てないと高さが取れない。
・直後の要素にclearを当てる必要がある。
・3カラムを組むには要素の入れ子を作らなければいけない

■display:inline-block

・inline-blockの要素間に改行や半角スペースが入ると、ブラウザでの表示に反映されて隙間が生じる
・inline-blockの幅をカッチリ決めないと予期せぬカラム落ちが起きる
・カラムごとに高さがバラバラになる(高さが揃わない)

■table

・昔懐かしいテーブルレイアウト
・強制的に横並びになる=画面幅が狭いとはみ出る(柔軟性がない)

display:inline-blockの隙間問題なんかは誰得だよ、もはやブラウザのバグとして扱っていいんじゃないのか
とか考えたりするくらい厄介の種なんですが、
いろいろ調べてみたところ、CSS3でカラムを組むためのプロパティが定義されていました。

display:flex

もう名前からしてすごく柔軟性がありそうです。
こいつなかなか優秀みたいで、親要素にdisplay:flexを与えると、その直下にある子要素をすべてカラムレイアウトとして組んでくれます。

<section style=“display:flex”>
<div> A </div>
<div> B </div>
<div> C </div>
</section>

上記の例なら、横に3つ、均等な幅を持ったdiv要素が形成される、と。
section自体に幅が変わると、中のdivもそれに応じて自動で伸縮して横並びを維持してくれます。
サイドバーの幅だけ固定して、メインカラムは残りの最大幅に。みたいなこともこれならラクラクです。

ただ、このプロパティの1つ厄介なところは、その名前がコロコロと変わってきた経緯があって、ベンダープレフィックスを指定しておかないとブラウザによっては機能しないケースがあるようです。
なので実際の記述は以下で。

display:-webkit-box;
display:-webkit-box;
display:-ms-flexbox;
display:flex;

子要素の並び順もHTMLの記述順に関係なく並べ変えが可能で、orderというプロパティの値が小さいものほど左に来ます。
先程の例を用いるなら、

<section style=“display:flex”>
<div style=“order:2”> A </div>
<div style=“order:3”> B </div>
<div style=“order:1”> C </div>
</section>

以上の記述で、実際の表示順は C→A→B になります。

まだ関連するプロパティはたくさんあるようですが、とりあえず以上のことだけおさえておけば簡単なカラムづくりには応用できそうです。