Control the layout properties of elements with the settings inside Advanced > Layout.
Display
This setting specifies the type of rendering box used for an element. There are six options available:
- flex – block-level flex container. This is the default for sections, columns, and divs.
- inline-flex – inline-level flex container.
- block – block-level element. Set display to block when using the CSS float property on its children.
- Inline – inline element (like <span>).
- inline-block – inline-level block.
- none – the element is not displayed.
Float
The float property does not work if the parent element's display property is set to flex, which is the default for most elements in Oxygen. There are three options available:
- none – Default value. The element does not float
- left – The element floats to the left of its container.
- right – The element floats the right of its container.
Overflow
This setting specifies what should happen if content overflows an element's rendering box. There are three options available:
- visible – Default value. The overflow is not clipped. It renders outside the element's box.
- hidden – The overflow is clipped. The overflowing content is not visible.
- scroll – The overflow is clipped, but a scroll-bar is added to see the rest of the content.
Clear
This setting specifies on which sides of an element floating elements are not allowed to float. There are four options available:
- none – Default value. Allows floating elements on both sides.
- left – No floating elements allowed on the left side.
- right – No floating elements allowed on the right side.
- both – No floating elements allowed on either the left or the right side.
Visibility
This setting specifies whether or not an element is visible. There are two options available:
- visible – Default value. The element is visible.
- hidden – The element is hidden (but still takes up space).
Z-Index
This setting determines the stacking order of an element. If two elements overlay each other, the element with the higher z-index will appear on top.
Position
This setting specifies the type of positioning method used for an element (static, relative, absolute, fixed). There are four options available:
- static – Default value.
- absolute – The element is positioned relative to its first positioned (not static) ancestor element.
- relative – The element is positioned relative to its normal position.
- fixed – The element is positioned relative to the browser window.
Flexbox Controls
Flex Direction
This setting specifies how flex items are placed in the flex container. There are four options available:
- row – The flex items are displayed horizontally, as a row.
- column – The flex items are displayed vertically, as a column.
- row-reverse – Same as a row, but in reverse order.
- column-reverse – Same as a column, but in reverse order.
Align Items
This setting specifies the default alignment for flex items inside a flex container. There are four options available:
- flex-start – Items are positioned at the beginning of the container.
- center – Items are positioned at the center of the container.
- flex-end – Items are positioned at the end of the container.
- stretch – Items are stretched to fit the container.
Justify Content
This setting aligns the flex container's items when the items do not use all available space on the main-axis. There are five options available:
- flex-start – Items are positioned at the beginning of the container.
- center – Items are positioned at the center of the container.
- flex-end – Items are positioned at the end of the container.
- space-between – Available space is distributed between the flex items.
- space-around – Available space is distributed around the flex items.
Flex Wrap
This setting specifies whether flex items should wrap or not. There are three options available:
- nowrap – Specifies that the flex items will not wrap.
- wrap – Specifies that the flex items will wrap if necessary.
- wrap-reverse – Specifies that the flex items will wrap if necessary, but in reverse order.
Align Content
This setting specifies how space is distributed between and around flex items along the cross-axis of their flex container. There are five options available:
- flex-start – Lines are packed toward the start of the flex container.
- center – Lines are packed toward the center of the flex container.
- flex-end – Lines are packed toward the end of the flex container.
- space-around – Lines are evenly distributed in the flex container, with half-size spaces on either end
- stretch – Lines stretch to take up the remaining space.
Flexbox Child Controls
When an element is the child of another element which is display: flex or display: inline-flex, the Flexbox Child Controls are available.
The Align Self setting specifies the alignment for the selected item inside the flex container. There are five options available:
- auto – Default value. The element inherits its parent container's Align Items property.
- left – The element is positioned on the left (or start) of the container.
- center – The element is positioned at the center of the container.
- right – The element is positioned on the right (or end) of the container.
- stretch – The element is positioned to fit the container.
The Order setting specifies the order of a flex item relative to the rest of the flex items inside the same container. The default value is 0.
The Flex Grow setting specifies how much the item grows relative to the rest of the flex items inside the same container. The default value is 0.
The Flex Shrink setting specifies how the item will shrink relative to the rest of the flex items inside the same container. The default value is 1.
