「HTMLのボックスが横並びにできない！」
「float使えば左右に寄せて横並びできるけど、回り込みの解除とかめんどくさいなぁ」
そんな方に朗報です。
flexを使えばfloatの”10倍”簡単な方法で、自由自在にボックスの配置が可能です。
ここではflexを使った簡単なボックス横並びをご紹介します。
ボックスを簡単に横に並べるにはflexboxを使おう！
まずは、単純にボックスをページに書いてみます。
コードは以下のとおりです。
See the Pen
ExxPEee by タクマ@ココナラWeb (@ts_contact)
on CodePen.
そのままボックスを書いただけでは縦に並びます。
では、flexboxを使ってボックスを横並びにしてみます。
See the Pen
NWWxYYb by タクマ@ココナラWeb (@ts_contact)
on CodePen.
何を加えたかというと、親ボックス、つまり「pbox」クラスのボックスに以下を追加しました。
display: flex;これだけです。
めちゃくちゃ簡単ですよね。
ちなみに同じことを「float」でやろうとした場合はこちらです。
See the Pen
NWWxYYb by タクマ@ココナラWeb (@ts_contact)
on CodePen.
上記を見て分かる通り、ボックスを横並びにはできました。
しかし、HTMLに「clearfix」クラスを追加し、CSSもかなり手を入れました。
「float」を使用する場合は、子ボックス(boxA、boxB)が親ボックスを貫通してしまうため、「clearfix」というものを挿入してあげなければならないため、記載するコードが必然的に増えてしまいます。
これを見ていただければ、いかにflexboxが簡単にボックスの横並びができるかが一目でわかると思います。
では次に、横並びにしたボックスを均等に配置する方法や、両端に配置する方法をご紹介します。
flexboxの間隔を開ける場合はjustify-contentを使おう！
先程はflexboxを使用して、ボックスを横並びにする方法をご紹介しました。
ここでは、横並びにしたボックスを間隔を開けて均等に配置する方法をご紹介します。
結論から言うと「justify-content」という要素を使用します。
まずは要素を中央に均等に配置してみます。
ボックスを中央に均等に配置する
See the Pen
WNNrJbZ by タクマ@ココナラWeb (@ts_contact)
on CodePen.
何をしたかというと親ボックス(pbox)に以下の記述を追加しました。
justify-content: space-around;
これだけです！すごく簡単ですよね！
僕も最初発見したとき簡単すぎて感動しました（笑）
では次に、左右両端にボックスを配置してみます。
ボックスを左右両端に配置する
See the Pen
NWWxMGa by タクマ@ココナラWeb (@ts_contact)
on CodePen.
ボックスを左右両端に表示する場合は以下をCSSに記載しました。
justify-content: space-between;ちょっと記述を変えるだけで、配置を自在に変更できます。
まとめ
いかがでしたか？
ボックスを横並びにする方法にお困りの方はご紹介した方法を使用してみてください。
１．ボックス横並びは「flex」を使用する
２．横並びにしたボックスを均等に配置するには「justify-content」を使用する
「justify-content」には他にも横並び方法を変えるための記述がありますので、ご自分にあう表示方法をぜひ試してみてくださいね！
ちなみにこの下の広告もご紹介した方法で横並びにしていますので、ご参考まで。↓
