floatの代わりにflexboxを使ってみる

コンテンツの表示エリアの左右両端にデータを表示する際、スタイルに「float」を指定した要素で振り分けを行っていましたが、CSS3ではflexboxを使ってそういった表示ができるようなので、ちょっと試してみました。

まずはfloatで指定

html

<div class="float-content">
    <div class="content-item float-01">leftエリア</div>
    <div class="content-item float-02">rightエリア</div>
    <div class="clearfix"></div>
</div>

css

.content-item{
    width:100px;
    line-height:50px;
    text-align:center;
    background-color:#ddf;
    border:1px solid #ddd;
}
.float-content{
    width:100%;
    max-width:500px;
    background-color:#eee;
    border:1px solid #ddd;
}
.float-content .float-01{
    float: left;
}
.float-content .float-02{
    float: right;
}
.clearfix{clear:both;}

同じものをflexboxで。

html

<div class="flexbox-content">
    <div class="content-item">leftエリア</div>
    <div class="content-item">rightエリア</div>
</div>

css

.content-item{
    width:100px;
    line-height:50px;
    text-align:center;
    background-color:#ddf;
    border:1px solid #ddd;
}
.flexbox-content{
    width:100%;
    max-width:500px;
    background-color:#eee;
    border:1px solid #ddd;
    /* flexboxで必要な設定 */
    display:flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

また、floatとflexboxの違いとして上記の構成で２つの要素が重なった場合、floatは上段にleftエリア、下段にrightエリアと表示が崩れるのに対して、flexboxの場合は上段・下段に分かれることはなく、tableタグのように左右の配置が崩れることはありませんでした。

flexboxは他にもいろいろなパターンでの表示が可能なようなので、CSS3のみの対応でよければ、floatよりもflexboxを使っていきたいですね。

• CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス