Flexboxで横に並べる

導入

要素をきれいに横並びにしたり、中央に寄せたりするための仕組みが Flexbox です。親要素に display: flex を指定すると、中の子要素が横一列に並びます。

説明

親に display: flex を付けると、子は横に並びます。さらに次の指定で配置を調整します。

• gap … 子どうしの間隔
• justify-content: center … 横方向に中央寄せ

<div class="row">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

<style>
  .row {
    display: flex;
    gap: 12px;
    justify-content: center;
  }
</style>

display: flex は 親 に付けるのがポイントです。子要素はそれだけで横に並び始めます。

やってみよう

上の例を打ち込み、3つの箱が中央に横並びで表示されることを確かめましょう。justify-content を space-between に変えると、両端に広がる配置になります。

演習

class="row" の要素を Flexbox（display: flex）にする CSS を書いてください。