To apply the flex grid we us the scss in the file @import “grid/flex-grid/flex-grid”;
Documentation for this can be found on http://flexboxgrid.com/
Below are some of the basics and things to note in our implementation
Ideally a site will not normally use grid layout and flex grid, however we have used 2 different sources for these and modified flex grid a little, so both can be applied if nessesary.
.row is replaced with flew-row in our implementation
.flex-row div containing .col-lg-4 cells
.flex-row div containing .col-lg-8 cells
Offsets
col-xs-offset-3 col-xs-9
Autowidth
col-xs
col-xs
col-xs
col-xs
col-xs
mix width and autowidth
col-xs
col-xs-3
Alignment
start: .start-xs
col-xs-3 – in – flex-row start-x
center: .center-xs
col-xs-3 – in – flex-row center-x
end: .end-xs
col-xs-3 – in – flex-row end-x
top: .top-xs
col-xs-6 – in – flex-row top-x
col-xs-6 – in – flex-row top-x
middle: .middle-xs
col-xs-6 – in – flex-row middle-x
col-xs-6 – in – flex-row top-x
bottom: .bottom-xs
col-xs-6 – in – flex-row bottom-x
col-xs-6 – in – flex-row top-x
Distribution
around: .around-xs
col-xs-2 – in – flex-row around-x
col-xs-2 – in – flex-row around-x
col-xs-2 – in – flex-row around-x
between: .between-xs
col-xs-2 – in – flex-row between-x
col-xs-2 – in – flex-row between-x
col-xs-2 – in – flex-row between-x
Reordering
first: .first-xs
(1) col-xs-4 – in – flex-row
(2) col-xs-4 – in – flex-row
(3) col-xs-4 and first-xs – in – flex-row around-x
last: .last-xs
(1) col-xs-4 – in – flex-row
(2) col-xs-4 and last-xs – in – flex-row
(3) col-xs-4 – in – flex-row around-x
Reversing
reverse: .reverse
(1) col-xs-4 – in – flex-row and reverse
(2) col-xs-4 – in – flex-row and reverse
(3) col-xs-4 – in – flex-row and reverse
Equal Height boxes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque neque diam, et feugiat mauris euismod nec. Etiam ultrices suscipit metus, hendrerit dignissim lacus rhoncus sed.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque neque diam, et feugiat mauris euismod nec. Etiam ultrices suscipit metus, hendrerit dignissim lacus rhoncus sed. Quisque mollis molestie nisl sed tempus. Quisque congue velit massa. Pellentesque sed ante consequat, iaculis felis et, feugiat purus. Proin mattis, eros non laoreet congue, justo diam porta ex, id auctor odio sapien non dui.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pellentesque neque diam, et feugiat mauris euismod nec. Etiam ultrices suscipit metus, hendrerit dignissim lacus rhoncus sed. Quisque mollis molestie nisl sed tempus. Quisque congue velit massa. Pellentesque sed ante consequat, iaculis felis et, feugiat purus. Proin mattis, eros non laoreet congue, justo diam porta ex, id auctor odio sapien non dui. Ut vitae auctor lorem. Cras hendrerit diam et porttitor tincidunt. Vivamus ut mauris ultrices, congue nulla in, accumsan nulla. Integer finibus gravida ipsum.