display:flexでdivを2列の横並びにする方法
display:flexでdivを2列の横並びにする方法

display:flexでdivを2列の横並びにする方法

display:flexでdivを2列の横並びにする方法 2021年05月20日 左 右

「display:flexを使えば2列の横並びができるらしいが、よくわからない！」

というアナタのために display:flexでdivを2列の横並びにする方法を解説します。

関連記事も参考にしてください。

【CSS】divをflexで2段以上の横並びをする方法「wordpressで記事一覧を出力して、それを複数行の横並びにしたい！」divをflexで2段以上の横並びをする方法を解説します。この記事を読む 【html/CSS】ul liのメニューを横並びにする方法メニューを横に並べたいのにul liは通常縦並びです。ul liを横並び2列にする方法を丁寧に解説します。この記事を読む CSSやhtmlで画像を横並びにする方法３選CSSやhtmlで画像を横並び2列にする方法を3つ紹介します。レスポンシブ対応と中央寄せの方法も解説します。この記事を読む CSS display:flexで解決できること9選!display:flexは便利らしいがどんなときに使えるのか。横並べを中心に、いろいろなことができるので覚えておきましょう。この記事を読む

目次

  • display:flexの横並び 完成イメージ
  • html解説
  • CSS解説
    • 親要素にdisplay:flex
    • 子要素にwidth
  • flexで横並びさせるメリット
    • 崩れない
    • 高さがそろう
  • 【まとめ】display:flexで2列の横並びする方法

display:flexの横並び 完成イメージ

以下のような2列の横並べを表現してみましょう。

左 右 <style> .example{ display: flex; background: #cad5f4; border: 1px solid #999; padding: 10px; } .example>div{ width: 50%; background: #FFF; border: 1px solid #999; padding: 10px; } </style> <div class="example"> <div>左</div> <div>右</div> </div>

CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。

↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む

↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。

html解説

<div class="example"> <div>左</div> <div>右</div> </div>

親要素の中に子要素を2つ設置します。この子要素が2列になる部分です。

子要素はdiv以外のタグでもかまいません。親をulに、子をliにするのもありです。

ちなみに3列にしたい場合は3つ並べましょう。

CSS解説

親要素にdisplay:flex .example{ display: flex; }

親要素に「display:flex」を指定しましょう。これを指定した要素の子要素が横並びになります。

子要素にwidth .example>div{ width: 50%; }

子要素にはwidthを指定することをオススメします。必須ではありません。

このとき、それぞれの合計が100％になるように指定しましょう。

例では均等になるようにどちらにも「width:50%」を指定しています。

3列にしたい場合は「width:calc(100% / 3)」と指定すると3分の1になります。

display:flexは合計値が100%を超えても改行されず再計算されます。多少はみ出すような計算になっていても大丈夫です。

flexで横並びさせるメリット

横並びといえばfloatがありますが、flexのほうが優れている理由を解説します。

崩れない

floatは横幅を少し間違えると崩れてしまいます。

flexなら横幅が間違っていても自動計算されたうえで崩れません。

高さがそろう

floatで高さをそろえるにはheightの指定が必要ですが、文字の量などにより高さは変化するため指定は難しいです。

flexなら高いほうに合わせて自動で高さをそろえることができます。

【まとめ】display:flexで2列の横並びする方法

html

親要素内に子要素を2つ

CSS

親要素にdisplay:flex

（子要素にwidth、その他装飾）

display:flexの基礎はこちら↓

CSS display:flexで解決できること9選!display:flexは便利らしいがどんなときに使えるのか。横並べを中心に、いろいろなことができるので覚えておきましょう。この記事を読む

以上、display:flexでdivを2列の横並びにする方法でした。

「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。

htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。この記事を読む CSSやhtmlをマンガで学ぶ
📎📎📎📎📎📎📎📎📎📎