display:flex を使ったカラムレイアウト。

毎度のことですが旧ブラウザでは未対応です。各ブラウザの対応状況はこちらでご確認を。

※Javascriptを使えばＩＥ8・9にも適応させることもできますが、対応が必要なかたは以下の参考サイトでご確認ください。
【参考サイト】
IE8・9にもFlexboxを対応させる、flexibility.jsがとっても便利！

FLEX BOX

以下は<section>タグで３カラムにする例。

カラム用のタグを囲む親タグに適当なクラス名を付けて・・・

<div class="flex">
<section>・・・</section>
<section>・・・・・・・・・</section>
<section>・・・・・・</section>
</div>

ＣＳＳのdisplayプロパティで「flex」を指定。

.flex {
 display:flex;
}
/*　各カラムの装飾は省略　*/

こんな感じになります。

各コラムの高さも自動で揃えてくれます。
floatやpositionなんかで段組に苦労していたのがウソのように簡単。

幅の調整

各コラムの横幅はＣＳＳのwidth指定でも調整できますが、
すべて同じ幅（同比率）にしたいなら、コラム要素のタグにＣＳＳで以下の「flex」プロパティを指定します。

.flex1 section {
 flex:1;
}

こんな感じになります。

flexプロパティは横幅を指定する際、１を基準とした比率を設定するもので、親タグに合わせて各コラムの横幅を自動調整してくれます。
例えば、特定のカラムだけ横幅を1.5倍にしたい場合は、目的のカラムのタグにクラス名を付けるか、ＣＳＳで疑似クラスE:nth-child(n)を利用してセレクタを作成して、以下ＣＳＳのようにflexプロパティで比率（サンプルでは中央のカラムだけ1.5倍）を変えることも可能です。

.flex section:nth-child(2) {
 flex:1.5;
}

こんな感じになります。

カラム要素の配置方向

Flexboxの初期設定では、ソースの下にあるカラム要素が右側へ回り込んで表示されます。
カラムの表示順を変えるには、ＨＴＭＬのコードを書き換える必要がありますが、
表示順を逆順にするだけなら、ＣＳＳのflex-directionプロパティを使えば簡単にできます。

.flex {
 display:flex;
 flex-direction:row-reverse;
}

こんな感じになります。

flex-directionプロパティのデフォルト値は「row」（横並び／昇順） になっていますが、その他にも以下の値を指定をすることで要素の配置方向を変えることができます。
●「column」 タテ並び／昇順
●「row-reverse（またはreverse）」 横並び／逆順
●「column-reverse」 タテ並び／逆順

＠media クエリと組み合わせれば、レスポンシブデザインも楽になりますね。