要素の横並びは、 float:left; よりも display:flex; の方が便利

CSSを使う場合、以下のコードで要素を横並びさせることが可能でした。

【HTML】

<div class="waku clearfix">
<div class="in">あああああああああああああああああああ</div>
<div class="in">いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</div>
<div class="in">うううううううううううう</div>
<div class="in">えええええええええええええええええええええええええええええええええええええええええええええええええええええ</div>
<div class="in">おお</div>
</div>

【CSS】

.waku{
    width: 500px;
    background: #999;
}

.in {
    background: #ccc;
    border: 1px solid #000;
    padding: 10px;
    float: left;
    width: 70px;
}

.clearfix:after{
    content : '';
    display : block;
    clear : both;
    height:0; 
}

このコードの問題点は、

• 枠線を設定した場合、その枠線の幅を計算して 内部要素の幅（.in）を設定する必要がある
• 枠線幅をキチンと計算しても、ブラウザ毎に枠線の幅の扱いが異なる為、思ったように表示されないことがある
• floatを設定した場合、 clearfix のおまじないを設定しないと、枠要素で設定した背景が表示されないなど、不具合が生じる場合がある
• 内部要素の高さが揃わない

というところにありました。

【このコードでの表示】

無理矢理高さを揃えるには、

【CSS】

.in {
    min-height: 219px;
    background: #ccc none repeat scroll 0 0;
    border: 1px solid #000;
    float: left;
    padding: 10px;
    width: 70px;
}

と、ハイライトした行を追加すれば可能でした。

【このコードでの表示】

しかし、例えば「う」の行を加筆したりすれば、たちまち、高さが揃わなくなります。

CSS3のdisplay:flex; が便利

このまどろっこしさを解消する設定項目として、CSS3には「display:flex;」が登場しました。古いバージョンのブラウザを切り捨てて構わないのなら非常に便利です。

この記事の続きを読むためのパスワードは、無料メルマガに登録した後に届く1通目のメールに記載されています。
無料メルマガにいますぐ登録