CSSフレックスボックスを使用したタイルレイアウト

それでは、フレックスボックスを使用してタイルレイアウトを作成する方法を学びましょう。まず、フレックスアイテムを3つずつの行で複数行に配置します。

そのためには、フレックスの親要素の幅を300pxに設定し、flex-wrapの値をwrapに、子要素の幅を100pxに設定します：

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
</div>

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

次に、ブロック間の水平方向の間隔を作りましょう。そのためには、余白用の追加スペースを確保するために親要素の幅を増やします。

1行に3つのブロックがあるため、それらの間には2つの間隔ができます。各間隔の幅を10pxにしたいとします。すると、親要素の幅は20px増やす必要があり、つまり300pxではなく320pxにする必要があります。

次に、ブロックの親要素にjustify-contentを値space-betweenで設定し、ブロック間の望ましい間隔を実現しましょう：

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
</div>

css.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 320px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

次に、ブロック間に垂直方向にも同じ間隔を追加しましょう。そのためには、align-contentプロパティを値space-betweenに設定できます。

ただし、これには親要素の高さを設定する必要があります。そうしないとalign-contentは機能しません。高さを320pxに設定しましょう。これにより、高さ100pxのブロックが3行と、行間の2つの10pxの間隔がちょうど収まります。

実行してみましょう：

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
</div>

css.parent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
  width: 320px;
  height: 320px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

すべて完璧に機能していますが、いくつかの問題点があり、それらは次のレッスンで検討します。