CSS Flexible Box
Antenna House Formatter V7.4 corresponds to CSS Flexible Box Layout Module Level 1.
Extended Properties
CSS (-ah-)align-content V7.4 no-LT
Aligns a flex container's lines within the flex container. [CSS3-FlexBox] Packing Flex Lines: the ‘align-content’ property, [CSS3-Align] The ‘justify-content’ and ‘align-content’ Properties
| Value: | flex-start | flex-end | center | space-between | space-around | stretch (Flexible Box) normal | |
| Initial: | stretch (Flexible Box) normal (Grid) |
| Applies to: | multi-line flex containers, grid containers |
| Inherited: | no |
| Percentages: | N/A |
| <content-distribution> | = | space-between | space-around | space-evenly | stretch |
| <content-position> | = | center | start | end | flex-start | flex-end |
CSS (-ah-)align-items V7.4 no-LT
Aligns items in the cross-axis direction within the flex container all at once. [CSS3-FlexibleBox] Cross-axis Alignment: the ‘align-items’, [CSS3-Align] Block-Axis (or Cross-Axis) Alignment: the ‘align-items’ property
| Value: | flex-start | flex-end | center | baseline | stretch (Flexible Box) normal | stretch | |
| Initial: | stretch (Flexible Box) normal (Grid) |
| Applies to: | flex containers, grid containers |
| Inherited: | no |
| Percentages: | N/A |
CSS (-ah-)align-self V7.4 no-LT
Specifies the alignment of flex items in the cross-axis direction all at once. [CSS3-FlexibleBox] Cross-axis Alignment: the ‘align-self’, [CSS3-Align] Block-Axis (or Cross-Axis) Alignment: the ‘align-self’ property
| Value: | auto | flex-start | flex-end | center | baseline | stretch (Flexible Box) auto | normal | stretch | |
| Initial: | auto |
| Applies to: | flex items, grid items |
| Inherited: | no |
| Percentages: | N/A |
CSS (-ah-)flex V7.4 no-LT
Shorthand property for setting properties related to the initial values of growing, shrinking and the width of the flex item. [CSS3-FlexibleBox] The 'flex' Shorthand
| Value: | none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] |
| Initial: | 0 1 auto |
| Applies to: | flex items |
| Inherited: | no |
| Percentages: | see individual properties |
This property is a shorthand for flex-grow, flex-shrink and flex-basis.
CSS (-ah-)flex-basis V7.4 no-LT
Sets the initial value of the width of flex item in the main-axis direction. [CSS3-FlexibleBox] The 'flex-basis' property
| Value: | content | <width> |
| Initial: | auto |
| Applies to: | flex items |
| Inherited: | no |
| Percentages: | relative to the flex container’s inner main size |
CSS (-ah-)flex-direction V7.4 no-LT
Sets the main-axis direction of the flex container. [CSS3-FlexibleBox] Flex Flow Direction: the 'flex-direction' property
| Value: | row | row-reverse | column | column-reverse |
| Initial: | row |
| Applies to: | flex containers |
| Inherited: | no |
| Percentages: | N/A |
CSS (-ah-)flex-flow V7.4 no-LT
Shorthand property for setting properties related to the direction of the flex container. [CSS3-FlexibleBox] Flex Direction and Wrap: the flex-flow shorthand
| Value: | <'flex-direction'> || <'flex-wrap'> |
| Initial: | see individual properties |
| Applies to: | see individual properties |
| Inherited: | see individual properties |
| Percentages: | see individual properties |
This property is a shorthand for flex-direction and flex-wrap.
CSS (-ah-)flex-grow V7.4 no-LT
Sets the flex item's flex grow factor. [CSS3-FlexibleBox] The 'flex-grow' property
| Value: | <number> |
| Initial: | 0 |
| Applies to: | flex items |
| Inherited: | no |
| Percentages: | N/A |
CSS (-ah-)flex-shrink V7.4 no-LT
Sets the flex item's flex shrink factor. [CSS3-FlexibleBox] The 'flex-shrink' property
| Value: | <number> |
| Initial: | 1 |
| Applies to: | flex items |
| Inherited: | no |
| Percentages: | N/A |
CSS (-ah-)flex-wrap V7.4 no-LT
Sets whether the flex container is single-line or multi-line, and the stacking direction of lines. [CSS3-FlexibleBox] Flex Line Wrapping: the 'flex-wrap' property
| Value: | nowrap | wrap | wrap-reverse |
| Initial: | nowrap |
| Applies to: | flex containers |
| Inherited: | no |
| Percentages: | N/A |
CSS (-ah-)justify-content V7.4 no-LT
Sets the alignment of items in the main-axis direction. [CSS3-FlexibleBox] Axis Alignment: the ‘justify-content’ property, [CSS3-Align] The ‘justify-content’ and ‘align-content’ Properties
| Value: | flex-start | flex-end | center | space-between | space-around (Flexible Box)
normal | <content-distribution> | <overflow-position>? [ <content-position> | left | right ] (Grid) |
| Initial: | flex-start (Flexible Box) normal (Grid) |
| Applies to: | flex containers, grid containers |
| Inherited: | no |
| Percentages: | N/A |
CSS (-ah-)order V7.4 no-LT
Sets the order priority in which items appear. [CSS3-FlexibleBox] Display Order: the 'order' property
| Value: | <integer> |
| Initial: | 0 |
| Applies to: | flex items, grid items |
| Inherited: | no |
| Percentages: | N/A |
Restrictions
Antenna House Formatter V7.4 Flexible Box Extension has the following restrictions:
When a flex line is fragmented due to page breaks, etc., the value of the following property will be overwritten in subsequent flex lines depending on flex-direction.
flex-direction Property to be overwritten Value to overwrite column justify-content flex-start