Display options

The z–index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

Use the Z-index options to position the overlapping elements.

Z-index value: auto | number | initial | inherit;

When creating a complex layout, the new advanced flexbox system will be of tremendous help. Flexbox is available only in Zion Builder Pro version.

Display options

Display: This defines a flex container; inline or block, inline-flex, inline-block, or none depending on the given value. It enables a flex context for all its direct children.

Visibility: This option sets visibility for the element – hidden or visible.

Overflow: The overflow property specifies what should happen if content overflows an element’s box – visible, hidden, and auto.

Flexbox container options

Flex direction: This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.

Align items: This defines the default behavior for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).

Available values: flex-start | center | flex-end | stretch | baseline;

• stretch (default): stretch to fill the container (still respect min-width/max-width)
• flex-start / start / self-start: items are placed at the start of the cross axis. The difference between these is subtle, and is about respecting the flex-direction rules or the writing-mode rules.
• flex-end / end / self-end: items are placed at the end of the cross axis. The difference again is subtle and is about respecting flex-direction rules vs. writing-mode rules.
• center: items are centered in the cross-axis
• baseline: items are aligned such as their baselines align

Justify content: This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

• flex-start (default): items are packed toward the start of the flex-direction.
• flex-end: items are packed toward the end of the flex-direction.
• center: items are centered along the line
• space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
• space-around: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.

Wrap: By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

• nowrap (default): all flex items will be on one line
• wrap: flex items will wrap onto multiple lines, from top to bottom.
• wrap-reverse: flex items will wrap onto multiple lines from bottom to top.

Align content: This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

• flex-start / start: items packed to the start of the container. The (more supported) flex-start honors the flex-direction while start honors the writing-mode direction.
• flex-end / end: items packed to the end of the container. The (more support) flex-end honors the flex-direction while end honors the writing-mode direction.
• center: items centered in the container
• space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end
• space-around: items evenly distributed with equal space around each line
• stretch (default): lines stretch to take up the remaining space

Flexbox child options

Align self: This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

Available options: flex-start | flex-end | center | baseline | stretch;

Order: By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

Available options: first | last | custom;

Grow: This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.

If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, the remaining space would take up twice as much space as the others (or it will try to, at least).

Shrink: This defines the ability for a flex item to shrink if necessary.

Basis: This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword.

Position options

Position: property specifies the type of positioning method used for an element (static, relative, absolute, or fixed).

Floating options

Floating: property specifies how an element should float.

The float property can have one of the following values:

• left – The element floats to the left of its container
• right – The element floats to the right of its container
• none – The element does not float (will be displayed just where it occurs in the text). This is default.

Clear: property specifies what elements can float beside the cleared element and on which side.

The clear property can have one of the following values:

• Left – Indicating that the element is moved down to clear past left floats.
• Right – Indicating that the element is moved down to clear past right floats.
• Both- Indicating that the element is moved down to clear past both left and right floats.