Flexbox

amx:flexLayout

Flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.

Flexible box (flexbox) enables responsive layout support. This is an improvement of the css box model. Moving the dialog implementation to use flexbox has the following advantages:

This component is commonly used on tablets and phones.

Appearance

Appearance characteristics for this component.

Orientation

Alignment

Behavior

Common behaviors for this component.

Flexibility

Usage

Usage guidelines for this component.

Flex container
The parent element in which flex items are contained. A flex container is defined using the flex or inline-flex values of the display property.

Flex item
Each child of a flex container becomes a flex item. Text directly contained in a flex container is wrapped in an anonymous flex item.

Axes
Every flexible box layout follows two axes. The main axis is the axis along which the flex items follow each other. The cross axis is the axis perpendicular to the main axis.

Directions
The main start/main end and cross start/cross end sides of the flex container describe the origin and terminus of the flow of flex items. They follow the main axis and cross axis of the flex container in the vector established by the writing-mode (left-to-right, right-to-left, etc.).

Lines
Flex items can be laid out on either a single line or on several lines according to the flex-wrap property, which controls the direction of the cross axis and the direction in which new lines are stacked.

Dimensions
The flex items' agnostic equivalents of height and width are main size and cross size, which respectively follow the main axis and cross axis of the flex container.

Sample

AMX sample code for this component.

<amx:flexLayout
id="fl1"
itemFlexibility="equal"
orientation="#{pageFlowScope.componentProperties.layoutOrientation}"
rendered="#{pageFlowScope.componentProperties.fl1Rendered}">

Related