Positions items in a grid, with a specific number of columns (defaults to twelve columns). Items may span multiple columns and may be displayed with offsets in between. When a row is "full", meaning that all twelve columns have been filled, items are laid out starting on the next row automatically.

Events:

openfl.events.Event.CHANGE

Dispatched when a property of the layout changes, which triggers the container to invalidate.

Available since

1.0.0

.

See also:

Constructor

@:value({ xxl : 1400.0, xl : 1200.0, lg : 992.0, md : 768.0, sm : 576.0, columnCount : 12 })new(columnCount:Int = 12, sm:Float = 576.0, md:Float = 768.0, lg:Float = 992.0, xl:Float = 1200.0, xxl:Float = 1400.0)

Creates a new ResponsiveGridLayout object from the given arguments.

Available since

1.0.0

.

Variables

@:bindable("change")columnCount:Int

The number of columns in the grid.

In the following example, the number of columns in the layout is set to 6:

layout.columnCount = 6;
Available since

1.0.0

.

@:bindable("change")columnGap:Float

The gap, in pixels, between each column.

In the following example, the layout's column gap is set to 20 pixels:

layout.columnGap = 20.0;
Available since

1.0.0

.

@:bindable("change")justifyResetEnabled:Bool

Indicates if the height of items should be reset if the rowVerticalAlign property is set to VerticalAlign.JUSTIFY.

Available since

1.0.0

.

See also:

@:bindable("change")lg:Float

The minimum size of the lg breakpoint, measured in pixels. Must be greater than or equal to the size of the md breakpoint.

In the following example, the layout's lg breakpoint is set to 1000 pixels:

layout.lg = 1000.0;
Available since

1.0.0

.

@:bindable("change")md:Float

The minimum size of the md breakpoint, measured in pixels. Must be greater than or equal to the size of the sm breakpoint.

In the following example, the layout's md breakpoint is set to 1000 pixels:

layout.lg = 1000.0;
Available since

1.0.0

.

@:bindable("change")paddingBottom:Float

The space, in pixels, between the parent container's bottom edge and its content.

In the following example, the layout's bottom padding is set to 20 pixels:

layout.paddingBottom = 20.0;
Available since

1.0.0

.

@:bindable("change")paddingLeft:Float

The space, in pixels, between the parent container's left edge and its content.

In the following example, the layout's left padding is set to 20 pixels:

layout.paddingLeft = 20.0;
Available since

1.0.0

.

@:bindable("change")paddingRight:Float

The space, in pixels, between the parent container's right edge and its content.

In the following example, the layout's right padding is set to 20 pixels:

layout.paddingRight = 20.0;
Available since

1.0.0

.

@:bindable("change")paddingTop:Float

The space, in pixels, between the parent container's top edge and its content.

In the following example, the layout's top padding is set to 20 pixels:

layout.paddingTop = 20.0;
Available since

1.0.0

.

@:bindable("change")rowGap:Float

The gap, in pixels, between each row.

In the following example, the layout's row gap is set to 20 pixels:

layout.rowGap = 20.0;
Available since

1.0.0

.

@:bindable("change")rowVerticalAlign:VerticalAlign

How items in a row are positioned vertically (along the y-axis) within that row.

The following example aligns each row's content to the bottom:

layout.rowVerticalAlign = BOTTOM;
Available since

1.0.0

.

See also:

@:bindable("change")sm:Float

The minimum size of the sm breakpoint, measured in pixels.

In the following example, the layout's sm breakpoint is set to 1000 pixels:

layout.lg = 1000.0;
Available since

1.0.0

.

@:bindable("change")xl:Float

The minimum size of the xl breakpoint, measured in pixels. Must be greater than or equal to the size of the lg breakpoint.

In the following example, the layout's xl breakpoint is set to 1000 pixels:

layout.xl = 1000.0;
Available since

1.0.0

.

@:bindable("change")xxl:Float

The minimum size of the xxl breakpoint, measured in pixels. Must be greater than or equal to the size of the xl breakpoint.

In the following example, the layout's xxl breakpoint is set to 1000 pixels:

layout.xxl = 1000.0;
Available since

1.0.0

.

Methods

layout(items:Array<DisplayObject>, measurements:Measurements, ?result:LayoutBoundsResult):LayoutBoundsResult

setGap(value:Float):Void

Sets both column and row gap properties to the same value.

Available since

1.0.0

.

See also:

setPadding(value:Float):Void