display:flexでdiv要素を横に並べる

CSSを使って要素を横並びにするにはいろいろな方法がありますが、今回は「display:flex」を使ってdiv要素を横に並べてみます。

display:flexでdiv要素を横に並べる

display:flexでdiv要素を横に並べるのは簡単で親のdivに「display:flex」を設定して、子の要素を横に並べます。

.my-container{
  display: flex;
  background: #ccc;
}
.my-box{
  background-color: #66b6d5;
}

わかりやすく背景に色をつけましょう。

HTMLは以下のようになります。

<div class="my-container">
    <div class="my-box" style="width:calc(100%/2);">row1-col1</div>
    <div class="my-box" style="width:calc(100%/2);">row1-col2</div>
</div>

表示すると以下の通り、横並びになります。

まとめ

CSSを使って要素を横並びにするには「display:flex」を使って子の要素を囲むだけでOKです。