CSS入門：柔軟なレイアウトを手に入れよう！フレックスボックスモデル

ウェブページを作るとき、さまざまな要素をきれいに並べたり、配置を変えたりするのが時に難しいですよね。そこで役立つのが「フレックスボックスモデル」です。このモデルを使えば、要素の配置やサイズ調整がずっと簡単になります。

フレックスボックスって何？

フレックスボックス（柔軟なボックス）は、コンテナ内のアイテム（子要素）のレイアウトを柔軟に調整するためのCSSのモデルです。このモデルを使うと、アイテムの横並びや縦並び、空間の分配、アイテムの順序変更などが、とても簡単にできるようになります。

フレックスボックスモデルを使うには、まずフレックスコンテナを設定します。そして、そのコンテナ内の子要素がフレックスアイテムになります。

HTML

<div class="flex-container">
  <div>アイテム1</div>
  <div>アイテム2</div>
  <div>アイテム3</div>
</div>

CSS

.flex-container {
  display: flex; /* これでフレックスコンテナになる */
}

このコードでは、.flex-containerにdisplay: flex;を設定することで、その<div>をフレックスコンテナにしています。コンテナ内の<div>たちはフレックスアイテムとなり、横並びに配置されます。

フレックスボックスでは、アイテムの配置やサイズを簡単に調整できます。

CSS

.flex-container {
  display: flex;
  justify-content: center; /* アイテムを中央に寄せる */
}

アイテム1

アイテム2

アイテム3

CSS

.flex-container {
  display: flex;
  justify-content: space-between; /* アイテム間の間隔を均等にする */
}

フレックスボックスを使えば、ウェブページのレイアウトを柔軟に、そして簡単に制御できます。コンテナを設定し、アイテムの配置やサイズを調整するだけで、見た目が整ったレイアウトが完成します。これからのウェブデザインにぜひフレックスボックスを活用してみてください！