使い分け
横並びを実行する際、今までなんとなく「flex」を使ってきました。
しかし他にも方法（inline-block,float）があるので、結局何が適正なのかをはっきりさせるためにこの記事を書くことにしました！
それぞれの特徴
float
横並びにしたい要素全てにfloatを指定する。
（クラス名を統一すれば解決できる）
一部にfloatを指定すると、その要素が浮いてしまう・・・。
↓通常ver.
index.html
<div class="image">
<img src="images/IMG_9345.PNG" alt="">
</div>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
style.css
img{
width: 100%;
}
.image{
width: 200px;
height: auto;
}
浮いちゃうver.
index.html
<div class="image">
<img src="images/IMG_9345.PNG" alt="">
</div>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
style.css
img{
width: 100%;
}
.image{
width: 200px;
height: auto;
float:left;/*こいつを追加*/
}
画像の後ろに文字が回り込む！
あえてこの形を表現したい場合は「float」を使えばいいが、ただ横並びにするだけなら「float」じゃなくていい。
なぜなら浮いている要素を元に戻すには、cssが3行以上増えてしまうから。
inline-block
inline-blockはblockとinleneのいいとこ取りの要素。
| block | inline | inline-block | |
|---|---|---|---|
| width | ○ | × | ○ |
| height | ○ | × | ○ |
| margin | ○ | × | ○ |
| padding | ○ | △(上下のpaddingが他の要素とかぶってしまう) | ○ |
| 並び | 縦 | 横 | 横 |
inline-blockを使って要素を横並びにしたい場合は、要素全てに「inline-block」を指定しなければならない。
(クラス名を統一すれば解決できる)
flex
横並びにしたい親要素に「display:flex」を指定するだけ。
最大のメリットは、要素配置のアレンジをしやすくなること。
↓一部の例
| 使い方 | |
|---|---|
| flex-direction | 子要素の並ぶ向き |
| flex-wrap | 子要素の折り返し |
| flex-flow | flex-directionとflex-wrapをまとめて指定 |
| justify-content | 水平方向の揃え |
| align-items | 垂直方向の揃え |
結局何がいいの？
結論からすると「flex」がおすすめ！
要素の配置をアレンジしやすいのが大きいメリットです！！！
(比較的新しい方のcssプロパティだが、現在はほぼ全てのサイトで使用でき憎きIEがサポート終わったことも一つの要因です)