フレックスボックスでカラムレイアウトを実装する

 

スマホサイト制作で便利なフレックスボックスでカラムレイアウトを実装したいと思います。

まず、親要素に display: flex; を指定します。 Android 標準ブラウザとiOS Safariの古いバージョンへの対策で display:-webkit-box も入れています。 IE9以下は非対応で、IE10は display:-ms-flexbox; 、IE11は display: flex; で対応しています。
水平に並べる場合は　display: flex;　のみ、 垂直に並べる場合は　flex-direction: column;　も指定します。 -webkit-box-orient:block-axis; は古い仕様ですが flex-direction に対応していないsafari用です。 その他、-webkit-flex-direction: column; はChrome、-ms-flex-direction: column; はIE10向けです。
子要素にflex-grow: 1;を指定すると当配分の配置になります。 flex-growで子要素の比率を指定しています。 もしflex-grow: 2;なら、flex-grow: 1;を指定したブロックの2倍の比率という意味です。

 

【CSS】

h1 {
   font-size: 16px;
    line-height: 1.2;
   color: #666;
    padding: 5px 10px;
  margin: 10px 0;
 border-bottom: 2px solid #999;
}
.mainbox {
   width: 100%;
    display: -webkit-box;
   display: -webkit-flex; /* safari */
 display: -ms-flexbox; /* IE */
  display: flex;
  -webkit-box-orient: block-axis;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
}
.bnr {
  -webkit-flex-grow: 1;  /*Safari*/ 
  -webkit-box-flex: 1;  /*android */
  flex-grow: 1;
   text-align: center;
}
.bnr p {
    font-size: 14px;
    line-height: 1.2;
   color: #666;
    padding: 5px 10px;
  margin: 0 0 10px;
}

 

【html】

<section>
<h1>タイトル</h1>
<div class="mainbox">
 <div class="bnr">
        <img src="140827_img/bn_130_50.gif" width="130" height="50" alt="">
        <p>コピーコピー</p>
    </div>
 <div class="bnr">
        <img src="140827_img/bn_130_50.gif" width="130" height="50" alt="">
        <p>コピーコピー</p>
    </div>
</div>
</section>

 

floatを使わないので予想外のレイアウト崩れが起きにくいと思います。 display: flex;の古い仕様であるdisplay: box;だと、Firefoxで子要素のwidthを自動調節してしまうバグがありました。 display: flex; では問題なく表示されています。

 

 

※ちなみに、垂直に並べるとこのようになります。