概念と言葉

Flexボックスを説明する際に出てくる登場人物として、以下があります。

Flexコンテナ
Flexアイテム

Flexコンテナ

Flexコンテナ は Flexアイテムをラッピングするコンテナになります。

Flexアイテム

Flexコンテナにラッピングされ、横並び(または縦並び)する要素を Flexアイテム と呼びます。

Flexボックスの例

以下はflexボックスの例です。Flexコンテナ(親要素)に display: flex を指定するだけで、Flexアイテム(子要素)が横並びになります。

HTML

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
  <div class="flex-item">flex item 4</div>
</div>

CSS

/* Flexコンテナ */
.flex-container {
  display: flex;
  padding: 10px;
  outline: solid red;
}

/* Flexアイテム */
.flex-item {
  outline: solid;
  padding: 20px;
  background-color: aquamarine;
}

結果

赤線がFlexコンテナ(親要素)になります。薄緑色の要素がFlexアイテムになり、横並びになっている事がわかります。

flex item 1

flex item 2

flex item 3

flex item 4

Flexコンテナ

Flexコンテナを使用するだけでも要素(Flexアイテム)を横並びにする事が可能です。詳細は以下を参考にして下さい。

参考

【CSS】Flexコンテナ

Flexアイテム

以下を参考にして下さい。

最後に

Flexプロパティは様々な指定が出来ます。