基本となるhtml
<div class="boxContainer">
<div class="box">BOX1</div>
<div class="box">BOX2</div>
<div class="box">BOX3</div>
<div class="box">BOX4</div>
<div class="box">BOX5</div>
</div>
cssのみ方法を変えてそれぞれの方法にどのようなメリット・デメリットがあるか見ていく。
float
.box{
float: left;
}
.boxContainer{
overflow: hidden;
}
メリット
- 子要素の左右の順番を変えたい場合にcssのみで調整できる（ただし、左右のみなので大々的な修正はしづらい）
- 子要素の内容により高さが変わる場合は上揃えになる（この点では、子要素の高さの増減に対応しやすい）
デメリット
- 子要素は文字通りfloat（浮いた）状態になり親要素の高さが0になってしまう
- 子要素の内容は基本上揃えになる（vertical-alignが使用できない）
- 親要素の幅を指定しないとレイアウトが崩れる場合がある
親要素の高さ0の解消方法
- 親要素に
overflow:hiddenを設定する（ただし親要素からはみ出る要素が隠れる） - floatした後にくる子要素に
clear:bothを設定する - 親要素自体をfloatさせる
- 親要素に以下のようにclearfixを設定する
.clearfix:after {
content:" ";
display:block;
clear:both;
}
IE7以下をサポートしなければかなりスッキリする。
簡単なのはoverflow:hiddenとclearfix。
inline-block
.box{
display: inline-block;
font-size: 16px;
}
.boxContainer{
font-size: 0;
}
メリット
- 子要素同士の高さが異なり、親要素の幅が狭まった場合でもレイアウトが崩れることがない
デメリット
- 子要素の間に改行による隙間ができてしまう
- 子要素同士の並びをcssのみで調整することはできない
- 子要素の内容は基本上揃えになる（vertical-alignが使用できない）
改行による隙間の解消方法
- 親要素のfont-sizeを0にして子要素でfont-sizeを指定する
- 子要素の改行を取り払って以下のように一行で記述する
<div class="box">BOX1</div><div class="box">BOX2</div><div class="box">BOX3</div>
- 改行を以下のようにコメントアウトする
<div class="box">BOX1</div><!--
--><div class="box">BOX2</div><!--
--><div class="box">BOX3</div>
- 子要素の閉じタグを以下のように次の子要素の前に持ってくる
<div class="box">BOX1
</div><div class="box">BOX2
</div><div class="box">BOX3</div>
スマートなのは親要素のfont-sizeを0にする方法。
table-cell
.box{
display: table-cell;
vertical-align: middle;
}
.boxContainer{
width: 100%;
display: table;
table-layout: fixed;
}
メリット
- 子要素の幅を設定しなくても親要素の幅を指定するだけで自動的に子要素の幅が割り付けられる
- 親要素に
table-layout:fixedを指定することで、子要素の幅が内容によって増減しても子要素の幅は均等に割り付けられる - 子要素の内容の高さを揃えるのにvertical-alignを設定できる
デメリット
- marginによる子要素同士の調整ができない（paddingはできる）（border-spacingによる調整もできるが、子要素全てで均等にしかできない）
- 親要素の幅を変更してのレイアウト調整に対応しづらい（レスポンシブ対応など）
flexbox
.boxContainer{
display: flex;
}
横並びにするだけなら親要素にこれ一行だけでOK。
flex-directionの初期値がrowなため。
メリット
- 親要素にjustify-contentを指定することで子要素全体の水平位置を設定できる
- 親要素にalign-itemsを指定することで子要素全体の垂直位置を設定できる
- 親要素にflex-directionを指定することで子要素全体の並びを設定できる
- 子要素にflexを指定することで子要素の幅をリキッドに設定できる
デメリット
- 対応ブラウザがまだ芳しくない
対応ブラウザ
IE9は未対応。IE10はdisplay:-ms-flexbox
また、IE11ではflex:1ではなくflex-grow：1としなければならない。
Safari8 未満はdisplay: -webkit-flex
iOS9 未満はdisplay: -webkit-flex
Android 4.3 未満はdisplay: -webkit-box
justify-content
| 値 | 説明 |
|---|---|
| center | 子要素全体を左右中央揃えに |
| flex-start | 子要素全体を左揃えに |
| flex-end | 子要素全体を右揃えに |
| space-between | 子要素全体は利用可能な領域いっぱいに広がり、最初の子要素が左端に、最後の子要素が右端に移動し、その間の要素は等間隔に並べられる |
align-items
| 値 | 説明 |
|---|---|
| center | 子要素全体を上下中央揃えに |
| flex-start | 子要素全体を上揃えに |
| flex-end | 子要素全体を下揃えに |
flex
flex-grow、flex-shrink、flex-basisのショートハンド。
全ての子要素をflex:1にすれば、子要素の幅を利用可能な領域いっぱいかつ同じ幅にする。
その中の1子要素をflex:2にすれば、その子要素のみ他の子要素の2倍の幅になる。
flex-direction
| 値 | 説明 |
|---|---|
| row | 子要素全体の並びを横並びにする |
| column | 子要素全体の並びを縦並びにする |
まとめ
- ブラウザ対応に問題がなければflexbox
- レイアウト全体など子要素の内容が大きく増減しそうな場合はfloat
- 子要素の左右の入れ替えが発生しそうな場合はfloat
- ナビゲーションなど子要素の内容が小さく増減しなさそうな場合はinline-block
- vertical-alignが必要になりそうな場合はtable-cell
参考URL
display:table-cell;を安易に使うべきでない理由いろいろ
これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス