JUCE: FlexBox Class Reference

JUCE

Public Types | Public Member Functions | Public Attributes | List of all members
FlexBox Class Referencefinal
juce_gui_basics » layout

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

`#include <juce_FlexBox.h>`

## Public Types
enum class | Direction { row , rowReverse , column , columnReverse }
| Possible values for the flexDirection property. More...
enum class | Wrap { noWrap , wrap , wrapReverse }
| Possible values for the flexWrap property. More...
enum class | AlignContent { stretch , flexStart , flexEnd , center , spaceBetween , spaceAround }
| Possible values for the alignContent property. More...
enum class | AlignItems { stretch , flexStart , flexEnd , center }
| Possible values for the alignItems property. More...
enum class | JustifyContent { flexStart , flexEnd , center , spaceBetween , 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 class 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 class 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 class 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 class 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 class 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