flexboxとfloat比較。簡単に横並びや中央配置にする方法
横並びを再現するというのはHTMLやCSSを学び始めた人にとって最初の課題かと思います。
というのも分かりづらいんですよね…floatが一番基本的な方法かと思いますが解除し忘れたり寄ってしまったり…インラインボックスは変なスペースが入ってしまったり、横並びを途中で解除しづらかったりと…
flex-boxも便利ではありますが一長一短な部分はあります。
flexは目的のレイアウト、特に横並びに関しては簡単に実装できますが、自動調節させるのがデフォなため微調整し辛いという難点があります。つまりピクセルパーフェクトを目指せば目指すほどflexで組むと調整しづらくなったりします。またdlタグのセットを横並びにするときも難点ありますね。
floatはなんと言ってもわかりづらいし、解除を忘れてレイアウトが崩れる、基本寄ってしまうのでレイアウトをざっくり組むのに使いづらい。
あとfloatはそもそも回り込みなので回り込みレイアウトを組む際は普通に使います。
flexの詳細は説明はたくさん外でも出ているのでワンポイントで活用できる箇所をピックアップしてその手法だけ紹介したいと思います。
flexboxが便利
単純に横並びにする、中央配置にする、自動で余白をとってほしいって場合小要素が云々をあまり気にせずレイアウトを組むことができます。
横並びにするという点でfloatと決定的に違うのは、横並びにしたい要素たちの親要素につけるということでしょう
横並びにするのは簡単です。
<div class="ex-hoge">
<div>test1</div>
<div>test2</div>
<div>test3</div>
</div>
.ex-hoge{
display: flex;
}を指定した要素に内包されている小要素は横並びになります。これに更に指定を加えていくことで両端でいい感じにマージンをとってくれたり中央揃えにしたりできるわけですね。
ここまでは簡単です。ここからいろんな応用の方法があるわけですが、今回は中央配置に関して紹介したいと思います。
なかなか上下左右中央配置というのは今までは面倒で…小細工を重ねたりしていたのですが、こいつがflexboxであれば簡単にできます。
一例としてこういうサンプルを用意しました。
<div class="ex-hoge">
<div>中心へ</div>
</div>
.ex-hoge{
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
border: solid 1px #333333;
div{
border: solid 1px #333333;
width: 60px;
height: 50px;
}
}
いかがでしょう？中にあるdivが自動で真ん中へきていると思います。
これだけの記述で中央配置が作れるのでかなり便利です！さらに他の指定も交えることで微妙な調整も可能です！
少しだけ解説を加えれば…
「justify-content: center;」
で横並びの中心に。
「align-items: center;」
で縦並びの中心に。
という指定を加えています。これにとって中心へ持ってくることができるわけです。
しかしまだ中心の文章が真ん中ではありませんね。もちろんこのパーツにも更にflexboxをかけてあげることで完全に真ん中に寄ったパーツを作成することができます。
.ex-hoge{
display: flex;
justify-content: center;
align-items: center;
width: 120px;
height: 120px;
border: solid 1px #333333;
div{
display: flex;
justify-content: center;
align-items: center;
border: solid 1px #333333;
width: 60px;
height: 50px;
}
}
このテクはいろんなことに応用が効きますので覚えておいて損はないです！
一応codepenもおいておきます。
参考
codepencodepen
floatはどういうとき使う？
細かいことを言えば横並びでも使用場面はありますが、一番使う機会の多い場面を紹介。
やっぱりその指定の通り、雑誌のような回り込みのレイアウトの際に一番よく使います。
floatの特徴は横並び（回り込み）させたい要素そのものにつけるということです。
flexと共に学んでいるとごちゃつきやすいので注意しましょう
こんな感じのレイアウトですね。この場合写真にfloat: left;をかけてあげれば次の要素は回り込めるようになります。
こういう際はこちらがGoodですね！ただfloatを使用する際は解除に注意しましょう！
clearfix等のテクニックを使用し、解除をわすれないようにするのがベターかと思います。
