Loading...
Searching...
No Matches
juce::FlexBox Class Referencefinal

## 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

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

- juce_gui_basics/layout/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=default
| Creates an empty FlexBox container with default parameters.
| FlexBox (Direction, Wrap, AlignContent, AlignItems, JustifyContent) noexcept
| Creates an empty FlexBox container with these parameters.
| FlexBox (JustifyContent) noexcept
| Creates an empty FlexBox container with the given content-justification mode.
void | performLayout (Rectangle< float > targetArea)
| Lays-out the box's items within the given rectangle.
void | performLayout (Rectangle< int > targetArea)
| Lays-out the box's items within the given rectangle.

## Public Attributes

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

## Member Enums

## Direction

enum class juce::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 juce::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 juce::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 juce::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 juce::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.

## Constructors and Destructors

## FlexBox() [1/3]

juce::FlexBox::FlexBox | ( |  | ) |

default noexcept

Creates an empty FlexBox container with default parameters.

Referenced by FlexBox(), and FlexBox().

## FlexBox() [2/3]

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

noexcept

Creates an empty FlexBox container with these parameters.

References FlexBox().

## FlexBox() [3/3]

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

noexcept

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

References FlexBox().

## Member Functions

## performLayout() [1/2]

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

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

References performLayout().

Referenced by performLayout(), and performLayout().

## performLayout() [2/2]

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

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

References performLayout().

## Member Data Documentation

## flexDirection

Direction juce::FlexBox::flexDirection = Direction::row

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

## flexWrap

Wrap juce::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 juce::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 juce::FlexBox::alignItems = AlignItems::stretch

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

## justifyContent

JustifyContent juce::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> juce::FlexBox::items

The set of items to lay-out.

### Purchase

Get JUCE

### Discover

What's New in JUCE Features

### Learn

Documentaion Tutorials Made with JUCE Resources

### Support

JUCE Forum Newsletter Archive

### About

Contact Us JUCE Legal JUCE Licensing FAQ

### Events

Audio Developer Conference
© Raw Material Software Limited