FlexBox Class Referencefinal
juce_gui_basics » layout

Represents a FlexBox container, which contains and manages the layout of a set of FlexItem objects. More...

## Public Types

enum | Direction { Direction::row, Direction::rowReverse, Direction::column, Direction::columnReverse }
| Possible values for the flexDirection property. More...
enum | Wrap { Wrap::noWrap, Wrap::wrap, Wrap::wrapReverse }
| Possible values for the flexWrap property. More...
enum | AlignContent { AlignContent::stretch, AlignContent::flexStart, AlignContent::flexEnd, AlignContent::center, AlignContent::spaceBetween, AlignContent::spaceAround }
| Possible values for the alignContent property. More...
enum | AlignItems { AlignItems::stretch, AlignItems::flexStart, AlignItems::flexEnd, AlignItems::center }
| Possible values for the alignItems property. More...
enum | JustifyContent { JustifyContent::flexStart, JustifyContent::flexEnd, JustifyContent::center, JustifyContent::spaceBetween, JustifyContent::spaceAround }
| Possible values for the justifyContent property. More...

## Public Member Functions

| FlexBox () noexcept
| Creates an empty FlexBox container with default parameters. More...
| FlexBox (Direction, Wrap, AlignContent, AlignItems, JustifyContent) noexcept
| Creates an empty FlexBox container with these parameters. More...
| FlexBox (JustifyContent) noexcept
| Creates an empty FlexBox container with the given content-justification mode. More...
| ~FlexBox () noexcept
| Destructor. More...
void | performLayout (Rectangle< float > targetArea)
| Lays-out the box's items within the given rectangle. More...
void | performLayout (Rectangle< int > targetArea)
| Lays-out the box's items within the given rectangle. More...

## Public Attributes

Direction | flexDirection = Direction::row
| Specifies how flex items are placed in the flex container, and defines the direction of the main axis. More...
Wrap | flexWrap = Wrap::noWrap
| Specifies whether items are forced into a single line or can be wrapped onto multiple lines. More...
AlignContent | alignContent = AlignContent::stretch
| Specifies how a flex container's lines are placed within the flex container when there is extra space on the cross-axis. More...
AlignItems | alignItems = AlignItems::stretch
| Specifies the alignment of flex items along the cross-axis of each line. More...
JustifyContent | justifyContent = JustifyContent::flexStart
| Defines how the container distributes space between and around items along the main-axis. More...
Array< FlexItem > | items
| The set of items to lay-out. More...

## Detailed Description

Represents a FlexBox container, which contains and manages the layout of a set of FlexItem objects.

To use this class, set its parameters appropriately (you can search online for more help on exactly how the FlexBox protocol works!), then add your sub-items to the items array, and call performLayout() in the resized() function of your Component.

See also
  FlexItem

## Member Enumeration Documentation

## Direction

enum FlexBox::Direction

strong

Possible values for the flexDirection property.

Enumerator
row | Set the main axis direction from left to right.
rowReverse | Set the main axis direction from right to left.
column | Set the main axis direction from top to bottom.
columnReverse | Set the main axis direction from bottom to top.

## Wrap

enum FlexBox::Wrap

strong

Possible values for the flexWrap property.

Enumerator
noWrap | Items are forced into a single line.
wrap | Items are wrapped onto multiple lines from top to bottom.
wrapReverse | Items are wrapped onto multiple lines from bottom to top.

## AlignContent

enum FlexBox::AlignContent

strong

Possible values for the alignContent property.

Enumerator
stretch | Lines of items are stretched from start to end of the cross axis.
flexStart | Lines of items are aligned towards the start of the cross axis.
flexEnd | Lines of items are aligned towards the end of the cross axis.
center | Lines of items are aligned towards the center of the cross axis.
spaceBetween | Lines of items are evenly spaced along the cross axis with spaces between them.
spaceAround | Lines of items are evenly spaced along the cross axis with spaces around them.

## AlignItems

enum FlexBox::AlignItems

strong

Possible values for the alignItems property.

Enumerator
stretch | Items are stretched from start to end of the cross axis.
flexStart | Items are aligned towards the start of the cross axis.
flexEnd | Items are aligned towards the end of the cross axis.
center | Items are aligned towards the center of the cross axis.

## JustifyContent

enum FlexBox::JustifyContent

strong

Possible values for the justifyContent property.

Enumerator
flexStart | Items are justified towards the start of the main axis.
flexEnd | Items are justified towards the end of the main axis.
center | Items are justified towards the center of the main axis.
spaceBetween | Items are evenly spaced along the main axis with spaces between them.
spaceAround | Items are evenly spaced along the main axis with spaces around them.

## Constructor & Destructor Documentation

## FlexBox() [1/3]

FlexBox::FlexBox | ( |  | ) |

noexcept

Creates an empty FlexBox container with default parameters.

## FlexBox() [2/3]

FlexBox::FlexBox | ( | Direction | ,
|  | Wrap | ,
|  | AlignContent | ,
|  | AlignItems | ,
|  | JustifyContent |
| ) |  |

noexcept

Creates an empty FlexBox container with these parameters.

## FlexBox() [3/3]

FlexBox::FlexBox | ( | JustifyContent |  | ) |

noexcept

Creates an empty FlexBox container with the given content-justification mode.

## ~FlexBox()

FlexBox::~FlexBox | ( |  | ) |

noexcept

Destructor.

## Member Function Documentation

## performLayout() [1/2]

void FlexBox::performLayout | ( | Rectangle< float > | targetArea | ) |

Lays-out the box's items within the given rectangle.

## performLayout() [2/2]

void FlexBox::performLayout | ( | Rectangle< int > | targetArea | ) |

Lays-out the box's items within the given rectangle.

## Member Data Documentation

## flexDirection

Direction FlexBox::flexDirection = Direction::row

Specifies how flex items are placed in the flex container, and defines the direction of the main axis.

## flexWrap

Wrap FlexBox::flexWrap = Wrap::noWrap

Specifies whether items are forced into a single line or can be wrapped onto multiple lines.

If wrapping is allowed, this property also controls the direction in which lines are stacked.

## alignContent

AlignContent FlexBox::alignContent = AlignContent::stretch

Specifies how a flex container's lines are placed within the flex container when there is extra space on the cross-axis.

This property has no effect on single line layouts.

## alignItems

AlignItems FlexBox::alignItems = AlignItems::stretch

Specifies the alignment of flex items along the cross-axis of each line.

## justifyContent

JustifyContent FlexBox::justifyContent = JustifyContent::flexStart

Defines how the container distributes space between and around items along the main-axis.

The alignment is done after the lengths and auto margins are applied, so that if there is at least one flexible element, with flex-grow different from 0, it will have no effect as there won't be any available space.

## items

Array<FlexItem> FlexBox::items

The set of items to lay-out.

The documentation for this class was generated from the following file:

- juce_FlexBox.h