前回は、Flexbox で横に増えたコンテンツを折り返す方法を紹介します。

今回は、Flexbox でコンテンツ全体の位置を指定する方法を紹介します。

Flexbox とは

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

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

image2

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

基本のコードは、以下になります。

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

.container {
  background-color: beige;
  height: 20rem;
  padding: 1rem;
  display: flex;
}

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

image3

Flex アイテムの横の位置を指定する

Flex アイテムの横の位置を設定する場合は、justify-contentを Flex コンテナーに指定します。

Flex アイテムを左右中央にしたい場合、justify-content: center;を指定します。

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

  display: flex;
  justify-content: center;
}

ブラウザで確認すると、

image4

Flex アイテムが中央に並びました。

ちなみに初期値は、justify-content: flex-start;で指定できます。

image5

Flex アイテムを右寄せにしたい場合は、justify-content: flex-end;を指定します。

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

  display: flex;
  justify-content: flex-end;
}

ブラウザで確認すると、

image6

Flex アイテムが右寄せになりました。

左右の Flex アイテムを端に固定して、Flex アイテムを均等割にしたい場合、justify-content: space-between;を指定します。

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

  display: flex;
  justify-content: space-between;
}

ブラウザで確認すると、

image7

Flex アイテムが均等に並びました。

画面の横幅を狭くしてみると、

image8

左右の端のスペースは変わらず、中のスペースが均等に狭くなりました。

全ての Flex アイテム間のスペースを均等にしたい場合は、justify-content: space-around;を指定します。

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

  display: flex;
  justify-content: space-around;
}

ブラウザで確認すると、

image9

Flex アイテムの左右のスペースが均等になりました。

画面の横幅を狭くしてみると、

image10

スペースが均等に狭くなりました。

左右のスペースを含め均等にするには、justify-content: space-evenly;を指定します。

ブラウザで確認すると、

image11

Flex アイテム間と左右のスペースが均等になりました。

Flex アイテムの縦の位置を指定する

Flex アイテムの縦の位置を設定する場合は、align-itemsを Flex コンテナーに指定します。

Flex アイテムを上下中央揃えにしたい場合は、Flex コンテナーにalign-items: center;を指定します。

.container {
  background-color: beige;
  height: 20rem;
  padding: 1rem;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

ブラウザで確認すると、

image12

Flex アイテムが上下中央に揃いました。

Flex アイテムを上揃えにしたい場合は、Flex コンテナーにalign-items:flex-start;を指定します。

image13

また、Flex アイテムを下揃えにしたい場合は、Flex コンテナーにalign-items:flex-end;を指定します。

ブラウザで確認すると、

image14

Flex アイテムが下揃えになりました。

次に、4 番の Flex アイテムの高さを 10rem にしてみます。

.item:last-child {
  height: 10rem;
}

image15

Flexbox は、位置の指定が簡単にできますので、ぜひ試してみてください。

ブログ一覧