前回は、Flexbox の設定やコンテンツ全体を整列する方法を紹介しました。

今回は、Flexbox でコンテンツを個別に整列する方法を紹介します。

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

image2

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

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

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

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

  display: flex;
  align-items: flex-start;
  justify-content: space-around;
}

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

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

.item-1 {
  height: 10rem;
}

image3

特定の Flex アイテムを整列する

特定の Flex アイテムを縦方向に整列したい場合、align-selfで指定します。

例えば、2 番の Flex アイテムを下寄りにしたい場合、align-self: flex-end;を指定します。

.item-2 {
  align-self: flex-end;
}

ブラウザで確認すると、

image4

2 番の Flex アイテムのみ下寄りになりました。

ちなみに、初期値は、上寄りであるalign-self: flex-start;が設定されています。

次は、中央に配置するには、align-self: center;で指定します。

.item-2 {
  align-self: center;
}

ブラウザで確認すると、

image5

2 番の Flex アイテムのみ中央に配置されました。

Flex アイテムを Flex コンテナーいっぱいに広げるには、align-self: stretch;で指定します。

.item-2 {
  align-self: stretch;
}

ブラウザで確認すると、

image6

2 番の Flex アイテムが Flex コンテナーいっぱいに広がりました。

Flex アイテムの順番を入れ替える

Flex アイテムの順番を入れ替えるには、入れ替えたい Flex アイテムにorderを設定します。

例えば、3 番の Flex アイテムを一番左にしたい場合、order: -1;を指定します。

.item-3 {
  order: -1;
}

ブラウザで確認すると、

image7

3 番の Flex アイテムが一番左へ移動しました。

orderの初期値は、『0』です。

orderの数字が小さい順番から左から右へ並びます。

例えば、

.item-1 {
  height: 10rem;
  order: 4;
}

.item-2 {
  align-self: stretch;
  order: 1;
}

.item-3 {
  order: 3;
}

.item-4 {
  order: 2;
}

とすると、

image8

数字が小さい順に並び変わりました。

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

Flex アイテムの横幅を指定するには、Flex アイテムにflex-growを設定します。

例えば、4 番の Flex アイテムにflex-grow: 1;を指定します。

.item-4 {
  order: 2;
  flex-grow: 1;
}

ブラウザで確認すると、

image9

4 番の Flex アイテムのみ横に広がりました。

flex-grow の基準は『0』です。

1 から 3 番 Flex アイテムは基準のままで、flex-grow: 1;を設定した 4 番の Flex アイテムが横いっぱいに広がりました。

さらに、3 番の Flex アイテムにflex-grow: 2;を指定します。

.item-3 {
  order: 3;
  flex-grow: 2;
}

ブラウザで確認すると、

image10

3 番の Flex アイテムが 4 番の Flex アイテムの 2 倍の幅になりました。

このように、flex-growに割合を指定すると、それに合わせて Flex アイテムの幅が変わります。

Flex アイテムに具体的な幅を指定する場合は、flex-basisを設定します。

例えば、4 番の Flex アイテムにflex-basis: 8rem;を指定します。

.item-4 {
  order: 2;
  flex-basis: 8rem;
}

ブラウザで確認すると、

image11

4 番の Flex アイテムのみ横に広がりました。

flex-basis は%でも指定できます。

例えば、3 番の Flex アイテムに、flex-basis: 40%;を指定します。

.item-3 {
  order: 3;
  flex-basis: 40%;
}

ブラウザで確認すると、

image12

3 番の Flex アイテムが横に広がりました。

今のままでは、画面の横幅を狭くした場合、3 番と 4 番の Flex アイテムも狭くなります。

image13

image14

横幅を固定したい場合、flex-shrink: 0;を指定します。

.item-4 {
  order: 2;
  flex-basis: 8rem;
  flex-shrink: 0;
}

ブラウザで確認すると、

image15

image16

画面の横幅を狭くしても、4 番の Flex アイテムの幅が変わらなくなりました。

Flex アイテムを個別で整列する場合は、こちらを試してみてください。

ブログ一覧