The Flex CSS grid, written in SASS, and available to you in this package.
npm install flex-sass
|
|
|
bower install Flex or npm install flex-sass
.grid
.no-pad
.inline
.wrap
.wrap-reverse
.no-wrap
.reverse
.stack
.justify-center
.justify-start
.justify-end
.justify-space-around
.justify-space-between
`
Justifies the content in the container as indicated in the class name.
---
`
.align-baseline
.align-center
.align-start
.align-end
.align-stretch
`
Aligns the items in the container as indicated in the class name.
---
#### Items
The following classes apply only to elements which are direct descendants of a parent container which has the class .grid
---
`
.span-1
.span-2
.span-3
.span-4
.span-5
.span-6
.span-7
.span-8
.span-9
.span-10
.span-11
.span-12
`
Specifies how many grid units the item will span, or its magnitude, on a given vector. For a given parent container the sum of all columns should be <= 12 or either wrapping or overflowing will occur.
---
`
.offset-1
.offset-2
.offset-3
.offset-4
.offset-5
.offset-6
.offset-7
.offset-8
.offset-9
.offset-10
.offset-11
.offset-12
`
Specifies how many grid units the item should be offset from the left. Affects the sum total of grid units for a parent container.
---
`
.offset-1-right
.offset-2-right
.offset-3-right
.offset-4-right
.offset-5-right
.offset-6-right
.offset-7-right
.offset-8-right
.offset-9-right
.offset-10-right
.offset-11-right
.offset-12-right
`
Specifies how many grid units the item should be offset from the right. Affects the sum total of grid units for a parent container.
---
`
.order-1
.order-2
.order-3
.order-4
.order-5
.order-6
.order-7
.order-8
.order-9
.order-10
.order-11
.order-12
`
Specifies the order in which the item should appear rendered on the page, despite their top-down order in the document. All items have an order of 12 by default, so that if an order value < 12 is given to an item, by use of one of these classes, it will be respected.
---
`
.grow-1
.grow-2
.grow-3
.grow-4
.grow-5
.grow-6
.grow-7
.grow-8
.grow-9
.grow-10
.grow-11
.grow-12
`
Specifies the velocity at which the item appears to grow relative to its sibling items.
---
`
.shrink-1
.shrink-2
.shrink-3
.shrink-4
.shrink-5
.shrink-6
.shrink-7
.shrink-8
.shrink-9
.shrink-10
.shrink-11
.shrink-12
`
Specifies the velocity at which the item appears to shrink relative to its sibling items.
---
`
.align-auto
.align-baseline
.align-center
.align-start
.align-end
.align-stretch
`
Overrides the default align-items attribute, which is specified by the .align- class on the parent container.
---
$3
---
.block
Displays an element as block and gives 100% width.
---
.block-center
Displays an element as block and sets margin to auto so that the element is centered in its parent container.
---
.hide
Sets display to none.
---
.show-inline
Sets display to inline.
---
.show-block
Sets display to block.
---
.show-inline-block
Sets display to inline-block.
---
.text-left
Justifies contained text to the left.
---
.text-center
Justifies contained text to the center.
---
.text-right
Justifies contained text to the right.
---
$3
Breakpoints are based purely on viewport size. To target a specific viewport size, simply append '-xl', '-lg', '-md', 'sm', 'xs' to any base class or helper class.
###### -xl (max-width 1600px)
###### -lg (max-width 1280px)
###### -md (max-width 960px)
###### -sm (max-width 640px)
###### -xs (max-width 320px)
Examples
$3
Goal: When the viewport size becomes smaller than 640px, stack the elements in our grid container.
By default Flex will wrap any grid items which exceed the size of the container, so we can simply allot a greater number of columns to different elements at different sizes.
`
`
If our grid parent has the .no-wrap class applied, we can still achieve this by indicating that we want the items in the grid to simply stack when the viewport is small using .stack-sm class.
`
`
$3
Goal: We have two columns, one that spans 2 grid units and the other 3 grid units. We want them centered in the grid.
Since there are an odd number of grid units we need to center in the page, we need to make the amount of space the content takes up even by adding one unit of offset to the second item. Since they will then take up 6 units of space, we have a remaining 6 units to distribute on either side, which is achieved by setting the offset of the first unit to 3 because there is just a remaining 3 units worth of space empty on the right side.
`
``