A collaboration project with @jaruesink, @gpfaff and @LZoog.
Align items to the start, center, end of a row, and with space between or space around the flex items.
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
Flex items can grow to fill space also.
Items can fill space
2
3
A full width helper class can be applied to break up items within rows.
Full Width Content
1
2
3
Full Width Content
4
5
Flex items have multple growth levels (default: 4) that can be applied to change their fill width. .grow_2 will be 2x the size of .grow_1, and .grow_4 will be 2x the size of .grow_2.
2x
1x
1x
1x
2x
3x
4x
Shorthand classes are provided as an alternate method to creating columns of similar width.
1
2
3
4
Under the across shorthand classes, flex items can use across classes to fill more than one column.
1
2
3
4
2x
Adding _sm, _md, _lg, _xl to the end of some classes will only apply it at that screen size and up. If a responsive extension is added to the flex or across shorthand classes, then all flex items will be displayed as a block below that breakpoint.
1
2
3
Note: Notice on the small to medium breakpoint how across_4 fills the row, which is 2 items across, because of the two_across shorthand. These across shorthands for flex items currently have limited usage. They also rely on their parent row's responsive extensions and cannot have their own responsive extension. These should cover most use cases, but if you have an issue please submit one on github.
1
2
3
4
4x
9
10
11
12
Responsive extensions can be added to grow classes as well.
Note: We have set word-break: break-all; so the size can reflect accurately. Long words/no-wrapping can prevent the flex items basis width from shrinking.
1x
4x_sm 1x_md
4x_md 1x_lg
4x_lg
An example with responsive extentions on layout classes.
1
2
3
4
5
The gutter default is set to 16px.
1
2
3
1
2
3
4
5
3x
Full Width Content
3x
6
1_1
1_2
2_1
2_2
Flex items have a default order of 0. So negative order positions will move to the front, and positive order positions will move to the back
1
2
3
Order positions from -6 to 6 are supported as well as responsive extensions.
1
2
3
4
5
6