New pages: CSS box alignment data types

files/en-us/web/css/baseline-position/index.md

@@ -0,0 +1,47 @@
+---
+title: <baseline-position>
+slug: Web/CSS/baseline-position
+page-type: css-type
+browser-compat: css.types.baseline-position
+---
+
+{{CSSRef}}
+
+The **`<baseline-position>`** {{glossary("enumerated")}} value type represents the `baseline` keyword values and `first` and `last` modifiers, used for the {{cssxref("align-content")}}, {{cssxref("align-items")}}, {{cssxref("align-self")}}, {{cssxref("justify-items")}} and {{cssxref("justify-self")}} properties as well as the {{cssxref("place-content")}}, {{cssxref("place-items")}}, and {{cssxref("place-self")}} shorthand properties.
+
+The `first` and `last` values give a box a baseline alignment preference, defaulting to `first` if the modifier is omitted.
+
+## Syntax
+
+```plain
+<baseline-position> = [ first | last ]? && baseline
+```
+
+## Values
+
+The `<baseline-position>` enumerated value type is specified using an optional `first` or `last` modifier with the `baseline` value. If a box does not belong to a shared alignment context, then the fallback alignment is used. The fallback alignment is also used to align the baseline-sharing group within its {{glossary("alignment container")}}.
+
+- `baseline`
+
+  - : Computes to `first baseline` defined below.
+
+- `first baseline`
+
+  - : Align the alignment baseline of the box's first baseline set with the corresponding baseline of its baseline-sharing group. The fallback alignment is `safe self-start` for self-alignment or `safe start` for content-distribution.
+
+- `last baseline`
+  - : Aligns the alignment baseline of the box's last baseline set with the corresponding baseline of its baseline-sharing group. The fallback alignment is `safe self-end` for self-alignment or `safe end` for content-distribution.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- Properties that use this data type: {{cssxref("align-content")}}, {{cssxref("align-items")}}, {{cssxref("align-self")}}, {{cssxref("justify-items")}}, {{cssxref("justify-self")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, and {{cssxref("place-self")}}
+- Other box alignment data types: {{cssxref("content-distribution")}}, {{cssxref("content-position")}}, {{cssxref("overflow-position")}}, and {{cssxref("self-position")}}
+- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module

files/en-us/web/css/content-distribution/index.md

@@ -0,0 +1,59 @@
+---
+title: <content-distribution>
+slug: Web/CSS/content-distribution
+page-type: css-type
+browser-compat: css.types.content-distribution
+---
+
+{{CSSRef}}
+
+The **`<content-distribution>`** {{glossary("enumerated")}} value type is used by {{cssxref("justify-content")}} and {{cssxref("align-content")}} properties, and the {{cssxref("place-content")}} shorthand, to distribute a container's extra space among its {{glossary("alignment subject", "alignment subjects")}}.
+
+## Syntax
+
+```plain
+<content-distribution> = space-between | space-around | space-evenly | stretch
+```
+
+## Values
+
+The following keyword values are represented by the `<content-distribution>` grammar term:
+
+- `space-between`
+
+  - : Evenly distributes the {{glossary("alignment subject")}} within the {{glossary("alignment container")}}. The first item is placed flush with the start edge of the alignment container, the last item subject is placed flush with the end edge of the alignment container, and the remaining items are evenly distributed so that the spacing between any two adjacent items is the same.
+
+  The default fallback alignment for `space-between` is `safe flex-start` for flex layout, and `start` otherwise. If there is only one item, the item will be flush with the start edge.
+
+- `space-around`
+
+  - : The items are evenly distributed in the container, with a half-size space on either end. The items subjects are distributed so that the spacing between any two adjacent items is the same, and the spacing before the first and after the last items is half the size of the other spacing.
+
+  The default fallback alignment for `space-around` is `safe center`. If the container has only one child, the item will be centered.
+
+- `space-evenly`
+
+  - : The items are evenly distributed in the container, with a full-size space on either end, so that the spacing between any two adjacent items, before the first item, and after the last item are all the same.
+
+  The default fallback alignment for `space-evenly` is `safe center`. If the container has only one child, the item will be centered.
+
+- `stretch`
+
+  - : If the combined size of the items is less than the size of the container, any items that can grow with have their size increased equally (not proportionally), while still respecting the constraints imposed by {{cssxref("max-height")}}, {{cssxref("max-width")}}, or equivalent functionality, so that the combined size of the items exactly fills the container.
+
+  The default fallback alignment for `stretch` is `flex-start` in flexbox, and `start` in other layout modes. If there is only one item, and that item can grow, it will grow to fill the container.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- Properties that use this data type: {{cssxref("align-content")}}, {{cssxref("justify-content")}}, {{cssxref("place-content")}}
+- Other box alignment data types: {{cssxref("baseline-position")}}, {{cssxref("content-position")}}, {{cssxref("overflow-position")}}, and {{cssxref("self-position")}}
+- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
+- [CSS flexible layout](/en-US/docs/Web/CSS/CSS_flexible_layout) module

files/en-us/web/css/content-position/index.md

@@ -0,0 +1,49 @@
+---
+title: <content-position>
+slug: Web/CSS/content-position
+page-type: css-type
+browser-compat: css.types.content-position
+---
+
+{{CSSRef}}
+
+The **`<content-position>`** {{glossary("enumerated")}} value type is used by {{cssxref("justify-content")}} and {{cssxref("align-content")}} properties, and the {{cssxref("place-content")}} shorthand, to align the box's contents within itself.
+
+## Syntax
+
+```plain
+<content-position> = center | start | end | flex-start | flex-end
+```
+
+## Values
+
+The `<content-position>` enumerated value type is specified using one of the following key terms.
+
+- `center`
+  - : Centers the {{glossary("alignment subject")}} within its {{glossary("alignment container")}}.
+- `start`
+  - : Aligns the alignment subject flush with the alignment container's start edge.
+- `end`
+  - : Aligns the alignment subject flush with the alignment container's end edge.
+- `flex-start`
+  - : In flex layout, aligns the alignment subject flush with the edge of the alignment container corresponding to the flex container's main-start or cross-start side, as appropriate. It is identical to `start` for layout modes other than flex layout.
+- `flex-end`
+  - : In flex layout, aligns the alignment subject flush with the edge of the alignment container corresponding to the flex container's main-end or cross-end side, as appropriate. Identical to `end` for layout modes other than flex layout.
+
+> [!NOTE]
+> The `left` and `right` keywords are excluded from `<content-position>`, despite being valid positional alignment values for the `justify-*` properties ({{cssxref("justify-content")}}, {{cssxref("justify-self")}}, and {{cssxref("justify-items")}}), because they are not allowed in the `align-*` properties ({{cssxref("align-content")}}, {{cssxref("align-self")}}, and {{cssxref("align-items")}}). They are instead explicitly included in the `justify-*` properties' grammars.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- Properties that use this data type: {{cssxref("align-content")}}, {{cssxref("justify-content")}}, {{cssxref("place-content")}}
+- Other box alignment data types: {{cssxref("baseline-position")}}, {{cssxref("content-distribution")}}, {{cssxref("content-position")}}, {{cssxref("overflow-position")}}, and {{cssxref("self-position")}}
+- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
+- [CSS flexible layout](/en-US/docs/Web/CSS/CSS_flexible_layout) module

files/en-us/web/css/overflow-position/index.md

@@ -0,0 +1,44 @@
+---
+title: <overflow-position>
+slug: Web/CSS/overflow-position
+page-type: css-type
+browser-compat: css.types.overflow-position
+---
+
+{{CSSRef}}
+
+The **`<overflow-position>`** {{glossary("enumerated")}} value type defines how an alignment subject is larger than its alignment container will overflow that container. For example, if centered items are wider than their container, the overflow may be displayed beyond the viewport's start edge, which can't be scrolled to. The `<overflow-position>` value defines whether the alignment mode should be overridden to ensure the content is visible (`safe`) or if the alignment mode must be adhered to (`unsafe`).
+
+This data type is valid for the {{cssxref("align-content")}}, {{cssxref("align-items")}}, {{cssxref("align-self")}}, {{cssxref("justify-items")}} and {{cssxref("justify-self")}} properties as well as the {{cssxref("place-content")}}, {{cssxref("place-items")}}, and {{cssxref("place-self")}} shorthand properties.
+If omitted, the default overflow alignment is a blend of `safe` and `unsafe`.
+
+## Syntax
+
+```plain
+<overflow-position> = unsafe | safe
+```
+
+## Values
+
+The following keyword values are represented by the `<overflow-position>` grammar term:
+
+- `safe`
+
+  - : If the size of the {{glossary("alignment subject")}} overflows the {{glossary("alignment container")}}, the alignment subject is instead aligned as if the alignment mode were `start`.
+
+- `unsafe`
+  - : Regardless of the relative sizes of the alignment subject and alignment container, the given alignment value is honored.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- Properties that use this data type: {{cssxref("align-content")}}, {{cssxref("align-items")}}, {{cssxref("align-self")}}, {{cssxref("justify-content")}} {{cssxref("justify-items")}}, {{cssxref("justify-self")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, and {{cssxref("place-self")}}
+- Other box alignment data types: {{cssxref("content-distribution")}}, {{cssxref("content-position")}}, {{cssxref("baseline-position")}}, and {{cssxref("self-position")}}
+- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module

files/en-us/web/css/self-position/index.md

@@ -0,0 +1,53 @@
+---
+title: <self-position>
+slug: Web/CSS/self-position
+page-type: css-type
+browser-compat: css.types.self-position
+---
+
+{{CSSRef}}
+
+The **`<self-position>`** {{glossary("enumerated")}} value data type is used by {{cssxref("justify-self")}} and {{cssxref("align-self")}} properties, and the {{cssxref("place-self")}} shorthand, to align the box within its alignment container, and also by {{cssxref("justify-items")}} and {{cssxref("align-items")}} properties, and the {{cssxref("place-items")}} shorthand, to specify default values for `justify-self` and `align-self`.
+
+## Syntax
+
+```plain
+<self-position> = center | start | end | self-start | self-end | flex-start | flex-end
+```
+
+## Values
+
+The following keyword values are represented by the `<self-position>` grammar term:
+
+- `center`
+  - : Centers the {{glossary("alignment subject")}} within its {{glossary("alignment container")}}.
+- `start`
+  - : Aligns the alignment subject flush with the alignment container's start edge.
+- `end`
+  - : Aligns the alignment subject flush with the alignment container's end edge.
+- `self-start`
+  - : Aligns the alignment subject flush with the edge of the alignment container corresponding to the alignment subject's start side.
+- `self-end`
+  - : Aligns the alignment subject flush with the edge of the alignment container corresponding to the alignment subject's end side.
+- `flex-start`
+  - : In flex layout, aligns the alignment subject flush with the edge of the alignment container corresponding to the flex container's main-start or cross-start side, as appropriate. It is identical to `start` for layout modes other than flex layout.
+- `flex-end`
+  - : In flex layout, aligns the alignment subject flush with the edge of the alignment container corresponding to the flex container's main-end or cross-end side, as appropriate. Identical to `end` for layout modes other than flex layout.
+
+> [!NOTE]
+> The `left` and `right` keywords are excluded from `<self-position>`, despite being valid positional alignment values for the `justify-*` properties ({{cssxref("justify-content")}}, {{cssxref("justify-self")}}, and {{cssxref("justify-items")}}), because they are not allowed in the `align-*` properties ({{cssxref("align-content")}}, {{cssxref("align-self")}}, and {{cssxref("align-items")}}). They are instead explicitly included in the `justify-*` properties' grammars.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- Properties that use this data type: {{cssxref("align-self")}}, {{cssxref("justify-self")}}, {{cssxref("place-self")}}, {{cssxref("align-items")}}, {{cssxref("justify-items")}}, {{cssxref("place-items")}}
+- Other box alignment data types: {{cssxref("baseline-position")}}, {{cssxref("self-distribution")}}, {{cssxref("overflow-position")}}, and {{cssxref("content-position")}}
+- [CSS box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) module
+- [CSS flexible layout](/en-US/docs/Web/CSS/CSS_flexible_layout) module