2020.12.22  2021.04.04

CSSのdisplay:flexを使って超簡単に要素を横並びにする方法!

皆さんこんにちは、マコブログです!

今回はCSSのdisplayプロパティを使用して要素を超簡単に横並びにする方法を紹介します。
ひと昔前まではfloat等を使用してせっせと横並びをしていましたが、もうその時代は終わりました。
フロントエンジニアとしての誇りをもってナウい技術を使っていきましょう!



まず、HTMLで横並びにしたい要素を配置しましょう。

<div class="hoge">横並び…</div>
<div class="hogehoge">だと…。</div>

にしときます。

これをHTMLに記述するだけでは、

横並び…
だと…。

になりますよね。

ですが、このように改造すると…。

<div class="" style="display: flex;">
<div class="hoge">横並び…</div>
<div class="hogehoge">だと…。</div>
</div>

なんと!「横並び…だと…。」になりました!
横並びにしたい要素をdivタグで囲み、「display: flex;」をあてることで、こんなにも簡単に横並びになるんです!

今まで別の方法で横並びを再現していた方にとっては、画期的すぎる方法ですよね…。

ですが、display: flexには注意点もあります!


注意点

・flexの直下にimgタグを単体で配置してはなりません。(※画像の比率が崩れる可能性があります。)
・おおもとの要素(flexをラッピングしているタグ)の幅をしっかりと決めてください。(※IEだと思わぬ表示崩れの原因になります。)

基本的に上記の二点に気を付けていれば、問題はないと思います。
また、flex-direction: column;やjustify-content: space-between;、 flex-wrap: wrap;と組み合わせることで、複雑なレイアウトでも難なくできてしまいます。

皆さんも是非「display:flex;」を使用して高速かつ効率的にコーディングを楽しみましょう!

こちらの記事も是非チェックしてみてください↓
CSS marginとpaddingの違いを分かりやすく説明

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →