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:

• Resizable dialogs can be implemented in a responsive manner (without the need for a resize listener)
• Flex containers enable ease of customization of layout. For example, changing the the content alignment of the body can be accomplished simply by changing the "align-items" property.

This component is commonly used on tablets and phones.

Appearance

Appearance characteristics for this component.

Orientation

• Auto - container will decide which orientation to use based on the orientation of the screen -- in landscape mode, "horizontal" is the default; in portrait mode, "vertical" is the default
  • Inverse - container will decide which orientation to use in inverse manner to the orientation of the screen -- in landscape mode, "vertical" is the default; in portrait mode, "horizontal" is the default
  • Horizontal - orientation will be always horizontal
  • Vertical - orientation will be always vertical

Alignment

• Stretch - items are stretched to fit the container
• Center - items are positioned at the center of the container
• Start - items are positioned at the beginning of the container
• End - items are positioned at the end of the container
• Baseline - items are positioned at the baseline of the container

Behavior

Common behaviors for this component.

Flexibility

• Flexible - allows item to stretch to the empty space
  
• Inflexible - item keeps the size of the content
  
• Grow-only - item is able only to extend beyond its content but is unable to shrink
  
• Shrink-only - item is able only to shrink but is unable to expand
  
• Baseline - items are positioned at the baseline of the container
• Equal - each item will have the same size independently on the size of their content

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.

• The flex-direction property establishes the main axis.
• The justify-content property defines how flex items are laid out along the main axis on the current line.
• The align-items property defines the default for how flex items are laid out along the cross axis on the current line.
• The align-self property defines how a single flex item is aligned on the cross axis, and overrides the default established by align-items.

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.).

• The order property assigns elements to ordinal groups and determines which elements appear first.
• The flex-flow property shorthands the flex-direction and flex-wrap properties to lay out the flex items.

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.

• The min-height and min-width properties initial value is 0.
• The flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items.

Sample

AMX sample code for this component.

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


Related

• Used On: Phone, Tablet
• Also Called: Flex Layout
• Related Components: Masonry Layout
• Resources: None