フレックスボックスでのボックス配置

この例では、3 つのフレックスアイテムが justify-content を使用して主軸に、 align-items を使用して交差軸に配置されます。最初のアイテムはグループに対して設定された align-items の値を上書きし、 align-self で center に設定しています。

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three <br />に追加<br />テキスト</div>
</div>

.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

.box {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border: 2px dotted rgb(96 139 168);
}

.box :first-child {
  align-self: center;
}

フレックスボックスは文書の書字方向を尊重しますので、英語の場合で justify-content が flex-end に設定されていた場合、アイテムをフレックスコンテナーの末尾に配置します。 flex-direction が row に設定されていた場合、この配置はインライン方向になります。

しかし、フレックスボックスでは flex-direction を column に設定することで、主軸を変更することができます。この場合、 justify-content はアイテムをブロック方向に配置します。したがって、フレックスボックスでは主軸と交差軸について次のように考えると最も簡単です。

• 主軸 = flex-direction で設定された向き = justify-content で配置
• 交差軸 = 主軸と交差 = align-content, align-self/align-items で配置

• justify-content

• align-self
• align-items
• align-content

主軸では、フレックスボックスはコンテンツをグループとして扱います。アイテムをレイアウトするために必要な空間の大きさが計算され、残りの空間は配分に利用されます。justify-content プロパティは、どのように残りの領域を使用するかを制御します。justify-content: flex-end に設定すると、余分な領域はアイテムの前に配置され、justify-content: space-around に設定すると、その大きさアイテムの両側に配置される、などです。

つまり、常にアイテムのグループ全体が動き回るよう配分されるため、justify-self プロパティはフレックスボックスでは意味を持ちません。

交差軸では、フレックスコンテナーのその方向に余白が追加され、単一のアイテムが始点と終点に動く可能性があるため、 align-self は意味を持ちます。

justify-self プロパティが必要であると考える可能性があるフレックスボックスの特定の利用場面があります。これは、おそらく分割ナビゲーションパターンを作成するために、一連のフレックスアイテムを分割したい場合です。この利用場面では、マージンに auto を使用することができます。 auto に設定されたマージンは、その方向で利用可能な領域をすべて吸収します。これが auto のマージンでブロックを中央揃えしたときの動作です。左右のマージンを auto に設定すると、ブロックの両側が利用可能なスペースをすべて利用しようとするので、ボックスは中央に配置されます。

開始点に配置された一連のフレックスアイテムのうち、1 つのアイテムで margin を auto に設定することで、分割ナビゲーションを作成できます。これは、フレックスボックスと alignment プロパティでうまくいきます。 auto のマージンに使用できる領域がなくなると、アイテムは他のすべてのフレックスアイテムと同じように動作し、空間に収まるように縮小します。

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div class="push">Four</div>
  <div>Five</div>
</div>

.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

.box {
  display: flex;
  border: 2px dotted rgb(96 139 168);
}
.push {
  margin-left: auto;
}

• row-gap
• column-gap
• gap

主軸では、column-gap プロパティは兄弟アイテムの間に固定幅の間隔を作成します。

交差軸では、row-gap プロパティは、隣接するフレックス行の間隔を作成するので、この効果を得るには flex-wrap を wrap に設定する必要があります。

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>

.box > * {
  padding: 20px;
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
}

.box {
  width: 450px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  column-gap: 2em;
  border: 2px dotted rgb(96 139 168);
}

.box > * {
  flex: 1;
}

• justify-content
• align-content
• place-content
• justify-items
• align-items
• place-items
• align-self
• row-gap
• column-gap
• gap

• 交差軸
• 主軸

• フレックスコンテナー内のアイテムの配置