align-contentとjustify-contentを一括で設定するショートハンドプロパティです。
place-content: <align-content> <justify-content>| place-content-center | place-content: center |
| place-content-between | place-content: space-between |
.flex-container {
display: flex;
flex-wrap: wrap;
place-content: center;
}フレックスコンテンツを中央配置
place-content: space-between center;垂直方向は均等配置、水平方向は中央配置
複数行のFlexboxやGridで威力を発揮。
place-itemsが「各セル内のアイテム」の配置なのに対し、place-contentは「トラック群全体」の配置です。AIはこの2つを混同した説明をよくします。コンテンツ全体をコンテナ中央に置くのがplace-content、各セルの中でアイテムを中央に置くのがplace-itemsです。
gridでトラック全体をコンテナ中央に配置したい。place-contentとplace-itemsの違いを踏まえて書いて
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。