HTML/CSS 簡単に横並びにできるflexboxについて

『コンテンツや文字を横並びにする』のに
flexboxが非常に便利なので、簡単に解説していきます。

<div class="container">
    <div class="left">
      <p>左です</p>
    </div>
    <div class="right">
      <p>右です</p> 
    </div>
</div>

<style>
.left{
    color: white;
    background-color: lightcoral;
    width: 100px;
    height: 100px;
    text-align: center;
}

.right{
    color: white;
    background-color: lightblue;
    width: 100px;
    height: 100px;
    text-align: center;
}
</style>

これを更新すると

こうなるので、親要素の.containerにdisplay: flex;を追加します。

<style>
    .container{
      display: flex;
    }
.left{
    color: white;
    background-color: lightcoral;
    width: 100px;
    height: 100px;
    text-align: center;
}

.right{
    color: white;
    background-color: lightblue;
    width: 100px;
    height: 100px;
    text-align: center;
}
  </style>

すると

横並びになりました。
二つのボックスを離して配置したいときは、親要素にjustify-content: space-around;もしくはjustify-content: space-between;を追加します。

ボックスがいい感じに配置されましたね。space-betweenを適応するとボックスが両端に配置されますので、ご自身の手で検証してみてください。

また、レスポンシブ対応させる時にボックスを左右入れ替えたい時は親要素にflex-direction: row-reverse;を追加すると、左右が入れ替わりますし、
flex-direction: column;を追加するとまた縦並びに戻ります。

.container{
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-around;
    }

.container{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
    }

簡単な解説は以上になります。他にも色々機能があるのでご自身で試してみてください。