place-content プロパティ

プロパティ place-content は、 フレックスアイテムの場合は主軸と交差軸に沿った、 グリッドの場合は水平軸と垂直軸に沿った アイテムの整列を指定します。最初の値は主軸（水平軸）に沿った整列、 二番目の値は交差軸（垂直軸）に沿った整列を指定します。 このプロパティは親要素に適用されます。

構文

cssセレクタ {
  place-content: 主軸_整列 交差軸_整列;
}

例 . 主軸の先頭と交差軸の中央による整列

現在、アイテムは主軸の上端に配置され、 同時に交差軸の中央に位置しています：

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: flex;
  place-content: start center;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

例 . 主軸の中央と交差軸の末尾による整列

ここでは、アイテムは主軸の中央に配置され、 交差軸の末尾に位置しています：

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: flex;
  place-content: center end;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

例 . 主軸の末尾と交差軸の先頭による整列

ここでは、アイテムは主軸の下端に配置され、 同時に交差軸の先頭に位置しています：

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: flex;
  place-content: end start;
  flex-wrap: wrap;
  height: 200px;
  border: 1px solid #696989;
}
#parent > div {
  width: 100px;
  height: 50px;
  border: 1px solid #696989;
}

Результат:

例 . グリッド内での垂直軸の先頭と水平軸の末尾による整列

アイテムを垂直軸の先頭と水平軸の末尾に合わせて整列させてみましょう：

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  place-content: start end;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

例 . グリッド内での垂直軸の中央と水平軸の先頭による整列

アイテムを垂直軸の中央と水平軸の先頭に合わせて整列させてみましょう：

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  place-content: center start;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

例 . グリッド内での垂直軸の末尾と水平軸の先頭による整列

アイテムを垂直軸の末尾と水平軸の先頭に合わせて整列させてみましょう：

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  place-content: end start;
  grid-template-columns: 100px 100px;
  gap: 10px;
  padding: 10px;
  border: 2px solid #696989;
  height: 200px;
  width: 400px;
}
#parent > div {
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #696989;
}

Результат:

関連項目