この翻訳は不完全です。英語から この記事を翻訳 してください。

The CSSjustify-items プロパティは、ボックスのすべてのアイテムに既定の justify-self を定義し、それぞれのボックスの調整を適切な軸に沿って、既定の方法で行ないます。

構文

/* 基本キーワード */
justify-items: auto;
justify-items: normal;
justify-items: stretch;

/* 位置による配置 */
justify-items: center;     /* Pack items around the center */
justify-items: start;      /* Pack items from the start */
justify-items: end;        /* Pack items from the end */
justify-items: flex-start; /* Pack flex items from the start */
justify-items: flex-end;   /* Pack flex items from the end */
justify-items: self-start;
justify-items: self-end;
justify-items: left;       /* Pack items from the left */
justify-items: right;      /* Pack items from the right */

/* ベースラインによる配置 */
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;

/* オーバーフロー時の配置 (位置による配置のみ) */
justify-items: safe center;
justify-items: unsafe center;

/* 従来の配置 */
justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;

/* グローバル値 */
justify-items: inherit;
justify-items: initial;
justify-items: unset;

このプロパティは4つの異なる形式のうち1つを取ることができます。

  • 基本キーワード: キーワード値 normal, auto, stretch のうちの一つ。
  • ベースラインによる配置: baseline キーワードに加えて、任意で first 又は last のどちらか。
  • 位置による配置: center, start, end, flex-start, flex-end, self-start, self-end, left, right のうちの一つ。加えて任意で safe 又は unsafe
  • 歴史的な配置: legacy キーワードに続いて、 left 又は right のどちらかの値。

auto
使用される値は、ボックスに親があれば、親ボックスの justify-items プロパティ、そうでなければ絶対位置であり、このような場合、 autonormal を表します。
normal
このキーワードの効果は、レイアウトモードに依存します。
  • ブロックレベルレイアウトでは、このキーワードは start の別名です。
  • 絶対位置のレイアウトでは、このキーワードは置換の絶対位置ボックスには start のように振舞い、その他の絶対位置ボックスには のように振舞います。
  • 表のセルのレイアウトでは、このキーワードは意味を持たず、無視されます。
  • フレキシブルボックスのレイアウトでは、このキーワードは意味を持たず、無視されます。
  • グリッドレイアウトでは、このキーワードは stretch のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスは start のように振舞います。
start
The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.
end
The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.
flex-start
The item ispacked flush to each other toward the edge of the alignment container depending on the flex container's main-start or cross-start side.
This only applies to flex layout items. For items that are not children of a flex container, this value is treated like start.
flex-end
The item is packed flush to each other toward the edge of the alignment container depending on the flex container's main-end or cross-end side.
This only applies to flex layout items. For items that are not children of a flex container, this value is treated like end.
self-start
The item is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
self-end
The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
center
The items are packed flush to each other toward the center of the of the alignment container.
left
The items are packed flush to each other toward the left edge of the alignment container. If the property’s axis is not parallel with the inline axis, this value behaves like start.
right
The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property’s axis is not parallel with the inline axis, this value behaves like start.
baseline
first baseline

last baseline
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
The fallback alignment for first baseline is start, the one for last baseline is end.
stretch
If the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container.
safe
If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start.
unsafe
Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.
legacy
Makes the value inherited by the box descendants. Note that if a descendant has a justify-self: auto value, the legacy keyword is not considered by the descend, only the left, right, or center value associated to it.

仕様書

仕様書 策定状況 コメント
CSS Box Alignment Module Level 3
justify-items の定義
草案 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応 ?1645 ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 ? ? あり45 ? ? ?

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,