CSS Flexible Box

Antenna House Formatter V7.5 corresponds to CSS Flexible Box Layout Module Level 1.

CSS Flexible Box is not available with Antenna House Formatter V7.5 Lite.

Extended Properties

CSS (-ah-)align-content no-LT

Aligns a flex container's lines within the flex container. [CSS3-FlexibleBox] 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 \| ~~<baseline-position>~~ \| <content-distribution> \| <overflow-position>? <content-position> (Grid)
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 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 \| ~~<baseline-position>~~ \| [ <overflow-position>? <self-position> ] (Grid)
Initial:	stretch (Flexible Box) normal (Grid)
Applies to:	flex containers, grid containers
Inherited:	no
Percentages:	N/A

CSS (-ah-)align-self 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 \| ~~<baseline-position>~~ \| <overflow-position>? <self-position> (Grid)
Initial:	auto
Applies to:	flex items, grid items
Inherited:	no
Percentages:	N/A

CSS (-ah-)flex 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 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 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 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 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 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 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 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 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.5 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