The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.
Ref.: https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
normal : CSS.Internal.Property
The effect of this keyword is dependent of the layout mode we are in:
stretch : CSS.Internal.Property
Flex items are stretched such that the cross-size of the item's margin box is the same as the line while respecting width and height constraints.
center : Maybe OverflowPosition -> CSS.Internal.Property
The flex items' margin boxes are centered within the line on the cross-axis. If the cross-size of an item is larger than the flex container, it will overflow equally in both directions.
start : Maybe OverflowPosition -> CSS.Internal.Property
The items are packed flush to each other toward the start edge of the alignment container in the appropriate axis.
end : Maybe OverflowPosition -> CSS.Internal.Property
The items are packed flush to each other toward the end edge of the alignment container in the appropriate axis.
selfStart : Maybe OverflowPosition -> CSS.Internal.Property
The items are packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
selfEnd : Maybe OverflowPosition -> CSS.Internal.Property
The items are packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
flexStart : Maybe OverflowPosition -> CSS.Internal.Property
The cross-start margin edges of the flex items are flushed with the cross-start edge of the line.
flexEnd : Maybe OverflowPosition -> CSS.Internal.Property
The cross-end margin edges of the flex items are flushed with the cross-end edge of the line.
baseline : CSS.Internal.Property
All flex items are aligned such that their flex container baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.
firstBaseline : CSS.Internal.Property
All flex items are aligned such that their flex container baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.
lastBaseline : CSS.Internal.Property
All flex items are aligned such that their flex container baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.
Used alongside an alignment keyword.
inherit : CSS.Internal.Property
The inherit CSS keyword causes the element to take the computed value of the property from its parent element.
Ref.: https://developer.mozilla.org/en-US/docs/Web/CSS/inherit
initial : CSS.Internal.Property
The initial CSS keyword applies the initial (or default) value of a property to an element.
Ref.: https://developer.mozilla.org/en-US/docs/Web/CSS/initial
revert : CSS.Internal.Property
The revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element.
Ref.: https://developer.mozilla.org/en-US/docs/Web/CSS/revert
revertLayer : CSS.Internal.Property
The revert-layer CSS keyword rolls back the value of a property in a cascade layer to the value of the property in a CSS rule matching the element in a previous cascade layer.
Ref.: https://developer.mozilla.org/en-US/docs/Web/CSS/revert-layer
unset : CSS.Internal.Property
The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.
Ref.: https://developer.mozilla.org/en-US/docs/Web/CSS/unset