メインコンテンツまでスキップ

Flexbox の使い方

1. Flex Container と Flex Items の設定​

まずは index.html と style.css を以下の内容にしてください。

index.html
<div class="container">
  <div class="item" id="item1">Item 1</div>
  <div class="item" id="item2">Item 2</div>
  <div class="item" id="item3">Item 3</div>
</div>
style.css
.container {
  border: 1px solid;
  padding: 16px;
}

.item {
  border: 1px solid;
  padding: 8px;
}
備考

HTML の基本構造 の index.html をコピーして、body タグ内に記述して下さい。

次のように縦並びのアイテムが表示されます。

Item 1
Item 2
Item 3

Flexbox を使用するには、まず、親要素（container）にdisplay: flexを設定します。

style.css
.container {
  border: 1px solid;
  padding: 16px;
  display: flex; /* 追加 */
}

.item {
  border: 1px solid;
  padding: 8px;
}

子要素（item）は自動的にフレックスアイテムになります。

Item 1
Item 2
Item 3

2. Flex Direction​

flex-directionプロパティを使用して、アイテムの配置方向を設定できます。値は以下の通りです。

  • row（デフォルト）：アイテムを横方向に配置
  • row-reverse：アイテムを横方向に逆順で配置
  • column：アイテムを縦方向に配置
  • column-reverse：アイテムを縦方向に逆順で配置
style.css
.container {
  border: 1px solid;
  padding: 16px;
  display: flex;
  height: 200px; /* 効果をわかりやすくするために高さを設定 */
  flex-direction: row;
}

.item {
  border: 1px solid;
  padding: 8px;
}

row​

Item 1
Item 2
Item 3

row-reverse​

Item 1
Item 2
Item 3

column​

Item 1
Item 2
Item 3

column-reverse​

Item 1
Item 2
Item 3

3. Justify Content​

justify-contentプロパティを使用して、主軸方向に沿ったアイテムの配置方法を設定します。
主軸とは、flex-directionプロパティで設定した方向のことで、row の場合は横方向、column の場合は縦方向です。

  • flex-start（デフォルト）：先頭に揃える
  • flex-end：末尾に揃える
  • center：中央に揃える
  • space-between：アイテム間のスペースを均等に
  • space-around：アイテムの周りのスペースを均等に
style.css
.container {
  border: 1px solid;
  padding: 16px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.item {
  border: 1px solid;
  padding: 8px;
}

flex-start​

Item 1
Item 2
Item 3

flex-end​

Item 1
Item 2
Item 3

center​

Item 1
Item 2
Item 3

space-between​

Item 1
Item 2
Item 3

space-around​

Item 1
Item 2
Item 3

4. Align Items​

align-itemsプロパティを使用して、主軸と交差する軸に沿ったアイテムの配置方法を設定します。

  • stretch（デフォルト）：アイテムを伸ばして揃える
  • flex-start：先頭に揃える
  • flex-end：末尾に揃える
  • center：中央に揃える
  • baseline：アイテムのテキストの基線に揃える
style.css
.container {
  border: 1px solid;
  padding: 16px;
  display: flex;
  flex-direction: row;
  height: 200px; /* 効果をわかりやすくするために高さを設定 */
  align-items: center;
}

.item {
  border: 1px solid;
  padding: 8px;
}

#item1 {
  padding: 8px;
}

#item2 {
  padding: 16px 8px;
}

#item3 {
  padding: 24px 8px;
}

stretch​

Item 1
Item 2
Item 3

flex-start​

Item 1
Item 2
Item 3

flex-end​

Item 1
Item 2
Item 3

center​

Item 1
Item 2
Item 3

baseline​

Item 1
Item 2
Item 3

5. Flex Wrap​

flex-wrapプロパティを使用して、アイテムがコンテナの枠を超えるときの折り返し方法を設定します。

  • nowrap（デフォルト）：折り返さない
  • wrap：アイテムを折り返す
  • wrap-reverse：逆方向に折り返す
style.css
.container {
  border: 1px solid;
  padding: 16px;
  display: flex;
  flex-direction: row;
  height: 200px; /* 効果をわかりやすくするために高さを設定 */
  width: 200px; /* 効果をわかりやすくするために幅を設定 */
  flex-wrap: wrap;
}

.item {
  border: 1px solid;
  padding: 8px;
}

#item1 {
  padding: 8px;
}

#item2 {
  padding: 16px 8px;
}

#item3 {
  padding: 24px 8px;
}

nowrap​

Item 1
Item 2
Item 3

wrap​

Item 1
Item 2
Item 3

wrap-reverse​

Item 1
Item 2
Item 3

6. Align Content​

align-contentプロパティは、複数行のアイテムの間隔を設定します。
アイテムが複数行にわたる場合に有効です。

  • flex-start：先頭に揃える
  • flex-end：末尾に揃える
  • center：中央に揃える
  • space-between：行間のスペースを均等に
  • space-around：行の周りのスペースを均等に
  • stretch（デフォルト）：行を伸ばして揃える
style.css
.container {
  border: 1px solid;
  padding: 16px;
  display: flex;
  flex-direction: row;
  height: 200px; /* 効果をわかりやすくするために高さを設定 */
  width: 200px; /* 効果をわかりやすくするために幅を設定 */
  flex-wrap: wrap;
  align-content: flex-start;
}

.item {
  border: 1px solid;
  padding: 8px;
}

flex-start​

Item 1
Item 2
Item 3

flex-end​

Item 1
Item 2
Item 3

center​

Item 1
Item 2
Item 3

space-between​

Item 1
Item 2
Item 3

space-around​

Item 1
Item 2
Item 3

stretch​

Item 1
Item 2
Item 3

7. Flex Item の個別設定​

Flexbox 内の各アイテムにはflex、order、およびalign-selfプロパティを使用して個別に設定ができます。

Order​

orderプロパティは、アイテムの順序を設定します。デフォルトは0です。

style.css
.container {
  border: 1px solid;
  padding: 16px;
  display: flex;
  flex-direction: row;
}

.item {
  border: 1px solid;
  padding: 8px;
}

#item1 {
  order: 2;
}

#item2 {
  order: 1;
}
Item 1
Item 2
Item 3

Flex grow​

flex-growプロパティは、アイテムが余白を埋める方法を設定します。デフォルトは0です。

style.css
.container {
  border: 1px solid;
  padding: 16px;
  display: flex;
  flex-direction: row;
}

.item {
  border: 1px solid;
  padding: 8px;
}

#item1 {
  flex-grow: 1;
}

#item2 {
  flex-grow: 2;
}
Item 1
Item 2
Item 3

Flex Shrink​

flex-shrinkプロパティは、アイテムが余白を縮める方法を設定します。デフォルトは1です。

style.css
.container {
  border: 1px solid;
  padding: 16px;
  display: flex;
  width: 150px; /* 効果をわかりやすくするために幅を設定 */
  flex-direction: row;
}

.item {
  border: 1px solid;
  padding: 8px;
}

#item1 {
  flex-shrink: 1;
}

#item2 {
  flex-shrink: 2;
}
アイテム1
アイテム2
アイテム3

Flex Basis​

flex-basisプロパティは、アイテムの初期サイズを設定します。デフォルトはautoです。

style.css
.container {
  border: 1px solid;
  padding: 16px;
  display: flex;
  flex-direction: row;
}

.item {
  border: 1px solid;
  padding: 8px;
}

#item1 {
  flex-basis: 100px;
}

#item2 {
  flex-basis: 200px;
}
Item 1
Item 2
Item 3

Flex​

flexプロパティは、flex-grow、flex-shrink、flex-basisのショートハンドです。

style.css
.container {
  border: 1px solid;
  padding: 16px;
  display: flex;
  flex-direction: row;
}

.item {
  border: 1px solid;
  padding: 8px;
}

#item1 {
  flex: 1 1 100px;
}

#item2 {
  flex: 2 2 200px;
}
Item 1
Item 2
Item 3

Align Self​

align-selfプロパティは、特定のアイテムの配置を設定します。align-itemsと同じ値が使えます。

style.css
.container {
  border: 1px solid;
  padding: 16px;
  display: flex;
  height: 200px; /* 効果をわかりやすくするために高さを設定 */
  flex-direction: row;
}

.item {
  border: 1px solid;
  padding: 8px;
}

#item2 {
  align-self: center;
}

#item3 {
  align-self: flex-end;
}
Item 1
Item 2
Item 3

まとめ​

Flexbox は、現代の Web デザインでよく使用されるレイアウト方法です。
使い方を覚えて、柔軟なレイアウトを作成しましょう。