Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ============================
- ======== 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.
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement