Get Oxygen
Learn Reference Styling Options Layout

Layout

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.

D:\Dropbox\!upwork\!manuals\oxygen\!Styling Options\Layout, Size & Spacing\3.png

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.

D:\Dropbox\!upwork\!manuals\oxygen\!Styling Options\Layout, Size & Spacing\9.png

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.

D:\Dropbox\!upwork\!manuals\oxygen\!Styling Options\Layout, Size & Spacing\10.png

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.

D:\Dropbox\!upwork\!manuals\oxygen\!Styling Options\Layout, Size & Spacing\11.png

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).

D:\Dropbox\!upwork\!manuals\oxygen\!Styling Options\Layout, Size & Spacing\12.png

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.

D:\Dropbox\!upwork\!manuals\oxygen\!Styling Options\Layout, Size & Spacing\13.png

Flexbox Controls

Flex Direction

This setting specifies how flex items are placed in the flex contsainer. 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.

D:\Dropbox\!upwork\!manuals\oxygen\!Styling Options\Layout, Size & Spacing\4.png

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.

D:\Dropbox\!upwork\!manuals\oxygen\!Styling Options\Layout, Size & Spacing\5.png

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.

D:\Dropbox\!upwork\!manuals\oxygen\!Styling Options\Layout, Size & Spacing\7.png

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.

D:\Dropbox\!upwork\!manuals\oxygen\!Styling Options\Layout, Size & Spacing\7.png

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.

D:\Dropbox\!upwork\!manuals\oxygen\!Styling Options\Layout, Size & Spacing\8.png

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.

D:\Dropbox\!upwork\!manuals\oxygen\!Styling Options\Layout, Size & Spacing\14.png

 

Soflyy is proud to offer you Oxygen, our vision for what visual website design can be. We love it, and we think you will too.
More About Us

Stay up to date with Oxygen

© Soflyy 2018
Designed with Oxygen.
Legal
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram