diff --git a/css-align/Overview.bs b/css-align/Overview.bs index df68a931ab2..b5ecaeea02e 100644 --- a/css-align/Overview.bs +++ b/css-align/Overview.bs @@ -234,20 +234,40 @@ Positional Alignment: the ''center'', ''start'', ''end'', ''self-start'', ''self
center (self, content)
Centers the alignment subject within its alignment container. +
+ For example, given one item with the inline axis running left to right the item will center inside the alignment container, with an equal amount of space left and right. With two items the items will group together in the center maintaining an equal amount of space left and right. +
+
start (self, content)
Aligns the alignment subject to be flush with the alignment container’s start edge in the appropriate axis. +
+ For example, given an inline axis running left to right, one or more items set to start will align to the left-hand edge of the alignment container. +
+
end (self, content)
Aligns the alignment subject to be flush with the alignment container’s end edge in the appropriate axis. +
+ For example, given an inline axis running left to right, one or more items set to end will align to the right-hand edge of the alignment container. +
+
self-start (self)
Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject’s start side in the appropriate axis. +
+ For example, given an inline axis running left to right on the alignment subject, an item set to self-start will align to the left-hand edge of the alignment container. +
+
self-end (self)
Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject’s end side in the appropriate axis. +
+ For example, given an inline axis running left to right on the alignment subject, an item set to self-end will align to the right-hand edge of the alignment container. +
+
flex-start (self, content)
Only used in flex layout. [[!CSS-FLEXBOX-1]] Aligns the alignment subject to be flush with the edge of the alignment container @@ -255,6 +275,10 @@ Positional Alignment: the ''center'', ''start'', ''end'', ''self-start'', ''self When used on boxes that are not children of a flex container, this value behaves as ''start''. +
+ For example, given a cross axis running left to right on the flex container, an item set to flex-start will align to the left-hand edge of the flex container. +
+
flex-end (self, content)
Only used in flex layout. Aligns the alignment subject to be flush with the edge of the alignment container @@ -262,15 +286,27 @@ Positional Alignment: the ''center'', ''start'', ''end'', ''self-start'', ''self When used on boxes that are not children of a flex container, this value behaves as ''end''. +
+ For example, given a cross axis running left to right on the flex container, an item set to flex-end will align to the right-hand edge of the flex container. +
+
left (self, content)
Aligns the alignment subject to be flush with the alignment container’s line-left edge. If the property's axis is not parallel with the inline axis, this value behaves as ''start''. +
+ For example, the item or items will align to the left-hand edge of the alignment container taking no account of the logical start or end of the container. +
+
right (self, content)
Aligns the alignment subject to be flush with the alignment container’s line-right edge. If the property's axis is not parallel with the inline axis, this value behaves as ''start''. + +
+ For example, the item or items will align to the right-hand edge of the alignment container taking no account of the logical start or end of the container. +
Two grammar terms are used to denote this collection of values: diff --git a/css-align/images/positional-center.svg b/css-align/images/positional-center.svg new file mode 100644 index 00000000000..df477953029 --- /dev/null +++ b/css-align/images/positional-center.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + start + + + end + + + + + start + + + end + + + + + diff --git a/css-align/images/positional-end.svg b/css-align/images/positional-end.svg new file mode 100644 index 00000000000..5cda0b6ab20 --- /dev/null +++ b/css-align/images/positional-end.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + start + + + end + + + + + + start + + + end + + + + diff --git a/css-align/images/positional-flex-end.svg b/css-align/images/positional-flex-end.svg new file mode 100644 index 00000000000..5cda0b6ab20 --- /dev/null +++ b/css-align/images/positional-flex-end.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + start + + + end + + + + + + start + + + end + + + + diff --git a/css-align/images/positional-flex-start.svg b/css-align/images/positional-flex-start.svg new file mode 100644 index 00000000000..d533e55d58f --- /dev/null +++ b/css-align/images/positional-flex-start.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + start + + + end + + + + + + start + + + end + + + + diff --git a/css-align/images/positional-left.svg b/css-align/images/positional-left.svg new file mode 100644 index 00000000000..d533e55d58f --- /dev/null +++ b/css-align/images/positional-left.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + start + + + end + + + + + + start + + + end + + + + diff --git a/css-align/images/positional-right.svg b/css-align/images/positional-right.svg new file mode 100644 index 00000000000..5cda0b6ab20 --- /dev/null +++ b/css-align/images/positional-right.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + start + + + end + + + + + + start + + + end + + + + diff --git a/css-align/images/positional-self-end.svg b/css-align/images/positional-self-end.svg new file mode 100644 index 00000000000..56c6361e06a --- /dev/null +++ b/css-align/images/positional-self-end.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + start + + + end + + + + diff --git a/css-align/images/positional-self-start.svg b/css-align/images/positional-self-start.svg new file mode 100644 index 00000000000..ccdac92ccc3 --- /dev/null +++ b/css-align/images/positional-self-start.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + start + + + end + + + + diff --git a/css-align/images/positional-start.svg b/css-align/images/positional-start.svg new file mode 100644 index 00000000000..d533e55d58f --- /dev/null +++ b/css-align/images/positional-start.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + start + + + end + + + + + + start + + + end + + + +