place-contentとplace-itemsの違い
place-contentとplace-itemsの共通事項
place-*** : <align-***> <justify-***>;一つ目の引数がalign-***にあたり、2つめの引数がjustify-***にあたる。2つ目の値が省略された場合は『justify-***』は『align-***』と同値となる。
実験してみた
| wrap | nowrap | |
|---|---|---|
| justify-content | o | o |
| align-content | o | x |
| align-items | o | o |
| wrap | nowrap | |
|---|---|---|
| justify-content | o | o |
| align-content | o | x |
| align-items | o | o |
上の表は各flex-flowにおいてjustify-***とalign-***の有効性を調べたものである。
結論
MDN justify-itemsで『フレックスボックスレイアウトでは、このプロパティは無視されます』と記載されており、flexよりgridで実験したほうがよかったなと後悔したことを記しておく。
place-contentは有効だが、place-itemsはflexに関しては役不足になると思われる。