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

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 class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>
* {
  margin: 0;
  padding: 0;
}

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

  display: flex;
  align-items: flex-start;
}

.item {
  background-color: darkgreen;
  color: white;

  margin: 2rem;
  padding: 1rem 2rem;
  font-size: 2rem;
  text-align: center;
}

image3

Flex コンテナーを狭くしていくと、Flex アイテムが横にはみ出してしまいます。

image4

Flex コンテナーがある一定以上狭くなると、Flex アイテムが折り返すようにします。

Flex アイテムを折り返すには、Flex コンテナーにflex-wrap: wrap;を設定します。

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

  display: flex;
  align-items: flex-star
  flex-wrap: wrap;
}

ブラウザで確認すると、

image5

Flex コンテナーに収まりきれない Flex アイテムが、折り返されました。

ちなみに、初期値では、flex-wrap: nowrap;が設定されています。

上に折り返すようにするには、flex-wrap: wrap-reverse;を設定します。

ブラウザで確認すると、

image6

Flex コンテナーに収まりきれない Flex アイテムが、上に折り返されました。

Flex アイテムが多い場合には、こちらを試してみてください。

ブログ一覧