CSS - Box Alignment (block, table, flex, grid layout) v.1 -

============================
======== CSS - Box Alignment (block, table, flex, grid layout)  v.1 - POSTé
============================

============================
======== CSS Box Alignment Module Level 3 - 2014
== https://www.w3.org/TR/css-align-3/

relating to the alignment of boxes within their containers in the various CSS box layout models:
 block layout, table layout, flex layout, and grid layout.
(The alignment of text and inline-level content is defined in [CSS3TEXT] and [CSS3LINE].)

Alignment Values

    3.1 Positional Alignment: the center, start, end, self-start, self-end, flex-start, flex-end, left, and right keywords
    3.2 Baseline Alignment: the baseline and last-baseline keywords
    3.3 Distributed Alignment: the stretch, space-between, space-around, and space-evenly keywords
    3.4 Overflow Alignment: the safe and true keywords

4 Content Distribution: the justify-content and align-content properties

    4.1 Baseline Content-Alignment
    4.2 Overflow and Scroll Positions

5 Self-Alignment: Aligning the Box within its Parent

    5.1 Inline/Main-Axis Alignment: the justify-self property
    5.2 Block/Cross-Axis Alignment: the align-self property
    5.3 Baseline Self-Alignment

6 Default Alignment

    6.1 Inline/Main-Axis Alignment: the justify-items property
    6.2 Block/Cross-Axis Alignment: the align-items property

7 Baseline Alignment Details

    7.1 Determining the Baseline of a Box
    7.2 Baseline Alignment Terminology
    7.3 Aligning Boxes by Baseline


==
Values have the following meanings:

center
    Centers the alignment subject within its alignment container.
start
    Aligns the alignment subject to be flush with the alignment container’s start edge.
end
    Aligns the alignment subject to be flush with the alignment container’s end edge.
self-start
    Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject’s start side.
self-end
    Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the alignment subject’s end side.
flex-start
    Only used in flex layout. [CSS3-FLEXBOX] Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-start or cross-start side, as appropriate. When used in layout modes other than Flexbox, this value computes to start.
flex-end
    Only used in flex layout. Aligns the alignment subject to be flush with the edge of the alignment container corresponding to the flex container’s main-end or cross-end side, as appropriate. When used in layout modes other than Flexbox, this value computes to end.
left
    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 computes to start.
right
    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 computes to start.