place-content

レイアウト・配置

align-contentとjustify-contentを一括で設定するショートハンドプロパティです。

構文

Syntax

place-content: <align-content> <justify-content>

.flex-container {
  display: flex;
  flex-wrap: wrap;
  place-content: center;
}

実行結果

Item 1

Item 2

Item 3

フレックスコンテンツを中央配置

place-content: space-between center;

実行結果

垂直方向は均等配置、水平方向は中央配置

複数行のFlexboxやGridで威力を発揮。

Chrome 59+, Firefox 45+, Safari 11+