Nuclear css flexible box properties
Browser support
- Chrome 29.0, 21.0 -webkit-
- Edge 12.0
- Internet Explorer 11.0, 10.0 -ms-
- Firefox 28.0, 18.0 -moz-
- Safari 9.0, 6.1 -webkit-
- Opera 17.0
Flex container properties
Display
Flex items are positioned inside a flex container along a flex line. By default there is only one flex line per flex container.
Specifies the type of box used for an HTML element.
flex
- Displays an element as an block-level flex container.inline-flex
- Displays an element as an inline-level flex container.
flex item 1 flex item 2 flex item 3
Flex direction
Specifies the direction of the flexible items.
row
- Default value. The flexible items are displayed horizontally.row-reverse
- Same as row, but in reverse order.column
- The flexible items are displayed vertically.column-reverse
- Same as column, but in reverse order.
Note: If the element is not a flexible item, this property has no effect.
flex item 1 flex item 2 flex item 3
Justify content
Aligns the flexible container's items horizontally.
flex-start
- Default. Items are positioned at the beginning of the container.flex-end
- Items are positioned at the end of the container.center
- Items are positioned at the center of the container.space-between
- Items are positioned with space between.space-around
- Items are positioned with space before, between, and after.
Tip: Use the align-items property to align the items on the vertically.
flex item 1 flex item 2 flex item 3
Align items
Specifies the default alignment for items inside the container.
stretch
- Default. Items are stretched to fit the container.center
- Items are positioned at the center of the container.flex-start
- Items are positioned at the beginning of the container.flex-end
- Items are positioned at the end of the container.baseline
- Items are positioned at the baseline of the container.
Tip: Use align-self property of each item to override align-items property.
flex item 1 flex item 2 flex item 3
Flex wrap
Specifies whether the flexible items should wrap or not.
wrap
- Default value. The flexible items are displayed horizontally.nowrap
- Same as row, but in reverse order.wrap-reverse
- The flexible items are displayed vertically.
Note: If the element is not a flexible item, this property has no effect.
flex item 1 flex item 2 flex item 3
Align content
Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines.
stretch
- Default value. Lines stretch to take up the remaining space.center
- Lines are packed toward the center of the flex container.flex-start
- Lines are packed toward the start of the flex container.flex-end
- Lines are packed toward the end of the flex container.space-between
- Lines are evenly distributed in the flex container.space-around
- Lines are evenly distributed in the flex container, with half-size spaces on either end.
Tip: Use the justify-content property to align the items on the horizontally. Note: There must be multiple lines of items for this property to have any effect.
flex item 1 flex item 2 flex item 3
Flex item properties
Order
Specifies the order of a flexible item relative to the rest of the flexible items inside the same container.
number
- Default value 0. Specifies the order for the flexible item.
Note: If the element is not a flexible item, the order property has no effect.
flex item 1 flex item 2 flex item 3
Margin
Setting margin: auto;
will absorb extra space. It can be used to push flex items into different positions.
Note: This uses the nuclearcss-margin module.
flex item 1 flex item 2 flex item 3
Perfectly centre content
Align self
Specifies the alignment for the selected item inside the container.
auto
- Default. The element inherits its parent container's align-items property, or "stretch" if it has no parent container.stretch
- The element is positioned to fit the container.center
- The element is positioned at the center of the container.flex-start
- The element is are positioned at the beginning of the container.flex-end
- The element is positioned at the end of the container.baseline
- The element is positioned at the baseline of the container.
Note: The align-self property overrides the container's align-items property.
flex item 1 flex item 2 flex item 3
Flex
Specifies the length of the item, relative to the rest of the flexible items inside the same container.
flex-grow
- A number specifying how much the item will grow relative to the rest of the flexible items.flex-shrink
- A number specifying how much the item will shrink relative to the rest of the flexible items.flex-basis
- The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit.auto
- Same as 1 1 auto.none
- Same as 0 0 auto.
Note: If the element is not a flexible item, the flex property has no effect.
Note: The flex-basis
and max-width
changes depending on the set value of the --gutter-width
variable.
flex item 1 flex item 2 flex item 3
Grid variables
Setting up the grid variables
column-count
- The number of columns the grid can have.gutter-width
- The space between each column.
Calculating the variables column width and gutters
total-gutter
- Adds all thegutter-width
s by thecolumn-count
.total-column
- The remaining space after thetotal-gutter
is taken out.column-width
- The width of a single column element.
Calculating each of the column width
fxb-x
- Flex basis width for each column.