The Flexbox plug-in takes advantage of the Box Transformation and allows to build graphics for adaptive storytelling.
It is based on the flex implementation of CSS and web development.
Note: This plug-in is located in: Plugins -> Container plug-ins -> Tools
Information: The Flexbox plug-in requires a valid license and is available for the Viz Engine Render Pipeline only!
Layout in Flexbox uses two axes, the main axis and the cross axis. The alignment of any child items along those two axes depends on the available height and width.
Flexbox Properties
Flex
Flex Wrap: Scales down children to fit into a box. By changing the wrapping mode, children are automatically aligned based on the setting:
No Wrap: Boxes are scaled down until they reach their minimum width.
Wrap and Wrap Reverse: Boxes are scaled down until they reach their minimum size and are then wrapped to fill the space.
Flex Direction: Defines the main axis and defines the direction of all children placed underneath the flexbox container.
Direction: Aligns starting from the left or from the right side. By default, it inherits the setting of the parent flex container.
Flex Basis: Defines the default size of a container along the main axis before any growing or shrink is performed. It can be either auto or a given value. This value is like setting the width if flex direction row is used or height or column layout is in use.
Flex Grow: Defines if and how strongly a container can grow to fit into a parent container. The minimum and maximum width/height values are taken into account. If growing is enabled for all child containers, the remaining space is distributed equally to all children.
Flex Shrink: Defines if and how strongly a container can shrink to fit into a parent container. The minimum and maximum width/height values are taken into account. The value is used as a proportional factor. For example if one container has a shrink value of
2, it shrinks twice as much as all other containers (see below).
3D Content
Update Box Transformation: Overrides values of Box Transformation in each field. This flag does not affect the width/height and x/y values of Box Transformation being overridden by FlexBox.
Box Transformation Z: Controls the z value of box information in Box Transformation.
Box Transformation Depth: Controls depth value box information in Box Transformation.
Dimensions
Aspect Ratio: Defines how a flexbox is being scaled. If it is on auto, the width and height taken as is. If a value is used, it defines the ratio between width and height. For example: An aspect of
2.0means the width is twice the value of the height.Sizes: Sets the width and height of a container.
Minimum: Sets the upper size constraints of a container. These properties have higher priority than all other properties and are always respected.
Maximum: Sets the lower size constraints of a container. These properties have higher priority than all other properties and are always respected.
Note: The sizes for width, height, minimum width and height as well as the maximum width and height can be set to be either auto, in percentage values or in pixel sizes.
Auto: The size for the box is being calculated automatically based on grow and shrink values, the content as well as the aspect ratio.
Pixels: Defines the width/height in pixels (This dimension can be influenced by other properties.)
Percentage: Same as pixels, but based on percentage values.
Margin: Adds an offset to the outside of the element. It offsets itself and all children from the calculated position. It adds to the total size for the element. it can be set to auto, pixels or percentage values. Negative numbers are allowed too.
Border: Does more or less the same as padding. It can only be set in pixels. The main purpose of having an additional border is to keep compatibility with the original flexbox implementation.
Padding: Affects the size of the container it is applied to. It does not add to the total size of an element if it has an explicit size set. It can be set in pixels or percentage, but can not be negative.
Position
Tracking Container: Specifies a reference container and Flexbox follows this position.
Mode: Shifts the whole container and its content based on the calculated position by the given values. This offset can be either relative or absolute.
Relative: Takes the calculated position and adds the given offset. Offsets can be set as auto (calculated automatically when using certain content alignments) or as value in pixels or percentage.
Absolute: Takes out the container from the calculation and sets the position to the given values. It can be set as pixels or percentage (auto is available, but is ignored). When using absolute positioning, all other properties that influence the position are no longer effective.
Offsets: Shifts the whole container and its content based on the calculated position by the given values.
Content
Justify Content: Describes how child containers align along the Main Axis. This can be used to automatically center items, for example. The following settings are available:
Flex Start: Aligns child containers to the start of the main axis.
Center: Aligns child containers to the center of the main axis.
Flex End: Aligns child containers to the end of the main axis.
Space between: Distributes the remaining space between all child containers.
Space around: Distributes the remaining space between all child containers, including start and end as one element.
Space Evenly: Distributes the remaining space between all child containers, space between all elements including start and end are exactly the same.
Align Items: Describes how child containers align along the cross axis.
Auto: Uses the align item of the parent container.
Flex Start: Aligns child containers to the start of the cross axis.
Center: Aligns child containers to the center of the cross axis.
Flex End: Aligns child containers to the end of the cross axis.
Stretch: Stretches items to fill the cross axis. The cross axis setting must be set to be auto to allow the parent to overwrite the value.
Baseline: Aligns all containers in a way such that their baselines align. The highest one starts on the top.
Align Items
Sets the default alignment for all child containers, however it can be overwritten by a children using the Align-Self property. The samples below show five child container with a width of 10% and a height of 25%, 30%, 35%, 40% and 45%, Justify content is set to space around. The following settings are available:
Align Self: Overwrites the Align Items property given by the parent container to is own.
Align Content: Defines how containers are aligned. If the wrap mode forces elements to be distributed in more than on row or column, it has no effect if no wrapping happens.
Auto: Uses the align item of the parent container.
Flex Start: Aligns wrapping child containers to the start of the cross axis.
Center: Aligns wrapping child containers to the center of the cross axis.
Flex End: Aligns child containers to the end of the cross axis.
Stretch: Stretches the space between the elements to reach the parent containers cross axis.
Baseline: Aligns all containers in a way such that their baselines align.
Space between: Distributes the remaining space between all lines to match the parent containers cross axis.
Space around: Like space between, but also distributes space including top and bottom.