Flexbox とは

Flexbox とは、コンテンツを簡単に整列することができる CSS のモジュールです。

Flexbox の構造は、下の図の通りです。

image2

親要素である Flex コンテナーがあり、その中に子要素である Flex アイテムを整列する仕組みです。

コンテンツを縦並びや横並びにしたい場合、Flexbox は威力を発揮します。

Flex アイテムを整列する

まずは、Flex アイテムを縦並びにしたコードを書いてみます。

<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
  </div>
</body>
* {
  margin: 0;
  padding: 0;
}

.container {
  background-color: beige;
  padding: 1rem;
}

.item {
  background-color: darkgreen;
  color: white;
  height: 3rem;
  margin: 2rem;
  padding: 1rem 2rem;
  font-size: 2rem;
  text-align: center;
}

image3

Flexbox で Flex アイテムを横並びにするには、親要素である container クラスにdisplay: flex;を指定します。

.container {
  background-color: beige;
  padding: 1rem;

  display: flex;
}

ブラウザで確認すると、

image4

Flex アイテムが横並びになりました。

インライン要素の場合、display: inline-flex;を指定します。

.container {
  display: inline-flex;
}

image5

Flex アイテムの向きを指定する

Flex アイテムの向きを設定する場合、flex-directionを Flex コンテナーに指定します。

例えば、Flex アイテムの並びを右から左に並べるには、flex-direction: row-reverse;と指定します。

.container {
  background-color: beige;
  padding: 1rem;

  display: flex;
  flex-direction: row-reverse;
}

ブラウザで確認すると、

image6

Flex アイテムが右から左に並びました。

ちなみに、初期値である、左から右に並ぶようにするには、flex-direction: row;を指定します。

image7

Flex アイテムを上から下に並ぶようにするには、flex-direction: column;を指定します。

.container {
  background-color: beige;
  padding: 1rem;

  display: flex;
  flex-direction: column;
}

ブラウザで確認すると、

image8

Flex アイテムが上から下に並びました。

反対に、下から上に並ぶようにするには、flex-direction: column-reverse;を指定します。

image9

このように、flex-directionを使えば、Flex アイテムを簡単に整列することができます。

Flexbox を理解すると、ウェブサイトを制作するのが楽になりますので、ぜひ試してみてください。

ブログ一覧