Display & Align
Category: BasicAtomic processing of display properties; alignment is divided into two main categories: inline element alignment (left/center/right) and flex child element alignment; parent alignment can be independe...
Display
Element display properties typically use [inline-]flex, [inline-]block, [inline-]grid and inline, with additional options like flow-root and none.
Special note about the flow-root property: When using float[:left/right] on child elements of a block element, it may cause parent element collapse. Applying flow-root to the parent element solves this issue - it's an enhanced version of the block property.
- Output
- HTML
-
Float layerFloat layerNo-float layer
-
This framework includes predefined styles for common display properties:
| Class | CSS Equivalent | Description |
|---|---|---|
_d-none |
display: none; |
Completely removes the element from the document flow |
_d-flow |
display: flow-root; |
Creates a block formatting context root |
_d-inline |
display: inline; |
Displays as an inline element |
_d-grid |
display: grid; |
Enables CSS Grid layout |
_d-block |
display: block; |
Displays as a block-level element |
_d-flex |
display: flex; |
Enables Flexbox layout |
_d-ingrid |
display: inline-grid; |
Displays as an inline-level grid container |
_d-inblock |
display: inline-block; |
Displays as an inline-level block container |
_d-inflex |
display: inline-flex; |
Displays as an inline-level flex container |
_d-show |
visibility + position |
Shows element without using display property (preserves space) |
_d-hide |
visibility + position |
Hides element without using display property (preserves space) |
Alignment
There are two alignment methods for text or child elements:
- Inline text or element alignment
- Flex layout child element alignment
When using align=start/center/end styles on elements, the text or inline elements will automatically align. However, this doesn't affect flex layout child elements - they require align-items and justify-content properties for proper alignment.
Inline Alignment
Use these three classes for inline alignment:
_a-s(align-start)_a-c(align-center)_a-e(align-end)
To support RTL text direction, we use start instead of left and end instead of right.
- Output
- HTML
-
The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
The oldest material found in the Solar System is dated to 4.5682 Ga (billion years) ago.
-
Flexbox Alignment
To align child elements in flexbox layouts, it's essential to understand the core alignment properties: align-items and justify-content. Their available values are:
| Property | Available Values | Default | Description |
|---|---|---|---|
align-items |
flex-start, center, flex-end | flex-start | Vertical alignment: start (top), center (middle), end (bottom) |
justify-content |
flex-start, center, flex-end | flex-start | Horizontal alignment: start (left), center (middle), end (right) |
| Class Name | Alignment Combination | Position Description |
|---|---|---|
_a-st |
start + top | Top-left corner |
_a-sc |
start + center | Left-center side |
_a-sb |
start + bottom | Bottom-left corner |
_a-ct |
center + top | Top-center position |
_a-cc |
center + center | Absolute center (both axes) |
_a-cb |
center + bottom | Bottom-center position |
_a-et |
end + top | Top-right corner |
_a-ec |
end + center | Right-center side |
_a-eb |
end + bottom | Bottom-right corner |
- Output
- HTML
-
- _a-st（start+top）
- _a-ct（center+top）
- _a-et（end+top）
- _a-sc（start+center）
- _a-cc（center+center）
- _a-ec（end+center）
- _a-sb（start+bottom）
- _a-cb（center+bottom）
- _a-eb（end+bottom）
-