mirror of
https://github.com/kristoferjoseph/flexboxgrid.git
synced 2026-01-25 07:47:53 +00:00
1 line
18 KiB
CSS
1 line
18 KiB
CSS
.row{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-flex-wrap:row-reverse;-ms-flex-wrap:row-reverse;flex-wrap:row-reverse}.column.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;-webkit-flex-wrap:column-reverse;-ms-flex-wrap:column-reverse;flex-wrap:column-reverse}.column-1-desk,.column-1-hand,.column-1-lap,.column-1-wall,.column-10-desk,.column-10-hand,.column-10-lap,.column-10-wall,.column-11-desk,.column-11-hand,.column-11-lap,.column-11-wall,.column-12-desk,.column-12-hand,.column-12-lap,.column-12-wall,.column-2-desk,.column-2-hand,.column-2-lap,.column-2-wall,.column-3-desk,.column-3-hand,.column-3-lap,.column-3-wall,.column-4-desk,.column-4-hand,.column-4-lap,.column-4-wall,.column-5-desk,.column-5-hand,.column-5-lap,.column-5-wall,.column-6-desk,.column-6-hand,.column-6-lap,.column-6-wall,.column-7-desk,.column-7-hand,.column-7-lap,.column-7-wall,.column-8-desk,.column-8-hand,.column-8-lap,.column-8-wall,.column-9-desk,.column-9-hand,.column-9-lap,.column-9-wall,.offset-1-desk,.offset-1-hand,.offset-1-lap,.offset-1-wall,.offset-10-desk,.offset-10-hand,.offset-10-lap,.offset-10-wall,.offset-11-desk,.offset-11-hand,.offset-11-lap,.offset-11-wall,.offset-12-desk,.offset-12-hand,.offset-12-lap,.offset-12-wall,.offset-2-desk,.offset-2-hand,.offset-2-lap,.offset-2-wall,.offset-3-desk,.offset-3-hand,.offset-3-lap,.offset-3-wall,.offset-4-desk,.offset-4-hand,.offset-4-lap,.offset-4-wall,.offset-5-desk,.offset-5-hand,.offset-5-lap,.offset-5-wall,.offset-6-desk,.offset-6-hand,.offset-6-lap,.offset-6-wall,.offset-7-desk,.offset-7-hand,.offset-7-lap,.offset-7-wall,.offset-8-desk,.offset-8-hand,.offset-8-lap,.offset-8-wall,.offset-9-desk,.offset-9-hand,.offset-9-lap,.offset-9-wall{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.column-auto-desk,.column-auto-hand,.column-auto-lap,.column-auto-wall{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0}.column-1-hand{-webkit-flex-basis:-webkit-calc(100% / 12);-ms-flex-preferred-size:calc(100% / 12);flex-basis:calc(100% / 12)}.column-2-hand{-webkit-flex-basis:-webkit-calc((100% / 12) * 2);-ms-flex-preferred-size:calc((100% / 12) * 2);flex-basis:calc((100% / 12) * 2)}.column-3-hand{-webkit-flex-basis:-webkit-calc((100% / 12) * 3);-ms-flex-preferred-size:calc((100% / 12) * 3);flex-basis:calc((100% / 12) * 3)}.column-4-hand{-webkit-flex-basis:-webkit-calc((100% / 12) * 4);-ms-flex-preferred-size:calc((100% / 12) * 4);flex-basis:calc((100% / 12) * 4)}.column-5-hand{-webkit-flex-basis:-webkit-calc((100% / 12) * 5);-ms-flex-preferred-size:calc((100% / 12) * 5);flex-basis:calc((100% / 12) * 5)}.column-6-hand{-webkit-flex-basis:-webkit-calc((100% / 12) * 6);-ms-flex-preferred-size:calc((100% / 12) * 6);flex-basis:calc((100% / 12) * 6)}.column-7-hand{-webkit-flex-basis:-webkit-calc((100% / 12) * 7);-ms-flex-preferred-size:calc((100% / 12) * 7);flex-basis:calc((100% / 12) * 7)}.column-8-hand{-webkit-flex-basis:-webkit-calc((100% / 12) * 8);-ms-flex-preferred-size:calc((100% / 12) * 8);flex-basis:calc((100% / 12) * 8)}.column-9-hand{-webkit-flex-basis:-webkit-calc((100% / 12) * 9);-ms-flex-preferred-size:calc((100% / 12) * 9);flex-basis:calc((100% / 12) * 9)}.column-10-hand{-webkit-flex-basis:-webkit-calc((100% / 12) * 10);-ms-flex-preferred-size:calc((100% / 12) * 10);flex-basis:calc((100% / 12) * 10)}.column-11-hand{-webkit-flex-basis:-webkit-calc((100% / 12) * 11);-ms-flex-preferred-size:calc((100% / 12) * 11);flex-basis:calc((100% / 12) * 11)}.column-12-hand{-webkit-flex-basis:-webkit-calc((100% / 12) * 12);-ms-flex-preferred-size:calc((100% / 12) * 12);flex-basis:calc((100% / 12) * 12)}.offset-1-hand{margin-left:-webkit-calc(100% / 12);margin-left:calc(100% / 12)}.offset-2-hand{margin-left:-webkit-calc((100% / 12) * 2);margin-left:calc((100% / 12) * 2)}.offset-3-hand{margin-left:-webkit-calc((100% / 12) * 3);margin-left:calc((100% / 12) * 3)}.offset-4-hand{margin-left:-webkit-calc((100% / 12) * 4);margin-left:calc((100% / 12) * 4)}.offset-5-hand{margin-left:-webkit-calc((100% / 12) * 5);margin-left:calc((100% / 12) * 5)}.offset-6-hand{margin-left:-webkit-calc((100% / 12) * 6);margin-left:calc((100% / 12) * 6)}.offset-7-hand{margin-left:-webkit-calc((100% / 12) * 7);margin-left:calc((100% / 12) * 7)}.offset-8-hand{margin-left:-webkit-calc((100% / 12) * 8);margin-left:calc((100% / 12) * 8)}.offset-9-hand{margin-left:-webkit-calc((100% / 12) * 9);margin-left:calc((100% / 12) * 9)}.offset-10-hand{margin-left:-webkit-calc((100% / 12) * 10);margin-left:calc((100% / 12) * 10)}.offset-11-hand{margin-left:-webkit-calc((100% / 12) * 11);margin-left:calc((100% / 12) * 11)}.start-hand{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-hand{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-hand{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-hand{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-hand{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-hand{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-hand{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-hand{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-hand{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-hand{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}@media only screen and (min-width:48em){.column-1-lap{-webkit-flex-basis:-webkit-calc(100% / 12);-ms-flex-preferred-size:calc(100% / 12);flex-basis:calc(100% / 12)}.column-2-lap{-webkit-flex-basis:-webkit-calc((100% / 12) * 2);-ms-flex-preferred-size:calc((100% / 12) * 2);flex-basis:calc((100% / 12) * 2)}.column-3-lap{-webkit-flex-basis:-webkit-calc((100% / 12) * 3);-ms-flex-preferred-size:calc((100% / 12) * 3);flex-basis:calc((100% / 12) * 3)}.column-4-lap{-webkit-flex-basis:-webkit-calc((100% / 12) * 4);-ms-flex-preferred-size:calc((100% / 12) * 4);flex-basis:calc((100% / 12) * 4)}.column-5-lap{-webkit-flex-basis:-webkit-calc((100% / 12) * 5);-ms-flex-preferred-size:calc((100% / 12) * 5);flex-basis:calc((100% / 12) * 5)}.column-6-lap{-webkit-flex-basis:-webkit-calc((100% / 12) * 6);-ms-flex-preferred-size:calc((100% / 12) * 6);flex-basis:calc((100% / 12) * 6)}.column-7-lap{-webkit-flex-basis:-webkit-calc((100% / 12) * 7);-ms-flex-preferred-size:calc((100% / 12) * 7);flex-basis:calc((100% / 12) * 7)}.column-8-lap{-webkit-flex-basis:-webkit-calc((100% / 12) * 8);-ms-flex-preferred-size:calc((100% / 12) * 8);flex-basis:calc((100% / 12) * 8)}.column-9-lap{-webkit-flex-basis:-webkit-calc((100% / 12) * 9);-ms-flex-preferred-size:calc((100% / 12) * 9);flex-basis:calc((100% / 12) * 9)}.column-10-lap{-webkit-flex-basis:-webkit-calc((100% / 12) * 10);-ms-flex-preferred-size:calc((100% / 12) * 10);flex-basis:calc((100% / 12) * 10)}.column-11-lap{-webkit-flex-basis:-webkit-calc((100% / 12) * 11);-ms-flex-preferred-size:calc((100% / 12) * 11);flex-basis:calc((100% / 12) * 11)}.column-12-lap{-webkit-flex-basis:-webkit-calc((100% / 12) * 12);-ms-flex-preferred-size:calc((100% / 12) * 12);flex-basis:calc((100% / 12) * 12)}.offset-1-lap{margin-left:-webkit-calc(100% / 12);margin-left:calc(100% / 12)}.offset-2-lap{margin-left:-webkit-calc((100% / 12) * 2);margin-left:calc((100% / 12) * 2)}.offset-3-lap{margin-left:-webkit-calc((100% / 12) * 3);margin-left:calc((100% / 12) * 3)}.offset-4-lap{margin-left:-webkit-calc((100% / 12) * 4);margin-left:calc((100% / 12) * 4)}.offset-5-lap{margin-left:-webkit-calc((100% / 12) * 5);margin-left:calc((100% / 12) * 5)}.offset-6-lap{margin-left:-webkit-calc((100% / 12) * 6);margin-left:calc((100% / 12) * 6)}.offset-7-lap{margin-left:-webkit-calc((100% / 12) * 7);margin-left:calc((100% / 12) * 7)}.offset-8-lap{margin-left:-webkit-calc((100% / 12) * 8);margin-left:calc((100% / 12) * 8)}.offset-9-lap{margin-left:-webkit-calc((100% / 12) * 9);margin-left:calc((100% / 12) * 9)}.offset-10-lap{margin-left:-webkit-calc((100% / 12) * 10);margin-left:calc((100% / 12) * 10)}.offset-11-lap{margin-left:-webkit-calc((100% / 12) * 11);margin-left:calc((100% / 12) * 11)}.start-lap{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-lap{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-lap{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-lap{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-lap{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-lap{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-lap{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-lap{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-lap{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-lap{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}}@media only screen and (min-width:62em){.column-1-desk{-webkit-flex-basis:-webkit-calc(100% / 12);-ms-flex-preferred-size:calc(100% / 12);flex-basis:calc(100% / 12)}.column-2-desk{-webkit-flex-basis:-webkit-calc((100% / 12) * 2);-ms-flex-preferred-size:calc((100% / 12) * 2);flex-basis:calc((100% / 12) * 2)}.column-3-desk{-webkit-flex-basis:-webkit-calc((100% / 12) * 3);-ms-flex-preferred-size:calc((100% / 12) * 3);flex-basis:calc((100% / 12) * 3)}.column-4-desk{-webkit-flex-basis:-webkit-calc((100% / 12) * 4);-ms-flex-preferred-size:calc((100% / 12) * 4);flex-basis:calc((100% / 12) * 4)}.column-5-desk{-webkit-flex-basis:-webkit-calc((100% / 12) * 5);-ms-flex-preferred-size:calc((100% / 12) * 5);flex-basis:calc((100% / 12) * 5)}.column-6-desk{-webkit-flex-basis:-webkit-calc((100% / 12) * 6);-ms-flex-preferred-size:calc((100% / 12) * 6);flex-basis:calc((100% / 12) * 6)}.column-7-desk{-webkit-flex-basis:-webkit-calc((100% / 12) * 7);-ms-flex-preferred-size:calc((100% / 12) * 7);flex-basis:calc((100% / 12) * 7)}.column-8-desk{-webkit-flex-basis:-webkit-calc((100% / 12) * 8);-ms-flex-preferred-size:calc((100% / 12) * 8);flex-basis:calc((100% / 12) * 8)}.column-9-desk{-webkit-flex-basis:-webkit-calc((100% / 12) * 9);-ms-flex-preferred-size:calc((100% / 12) * 9);flex-basis:calc((100% / 12) * 9)}.column-10-desk{-webkit-flex-basis:-webkit-calc((100% / 12) * 10);-ms-flex-preferred-size:calc((100% / 12) * 10);flex-basis:calc((100% / 12) * 10)}.column-11-desk{-webkit-flex-basis:-webkit-calc((100% / 12) * 11);-ms-flex-preferred-size:calc((100% / 12) * 11);flex-basis:calc((100% / 12) * 11)}.column-12-desk{-webkit-flex-basis:-webkit-calc((100% / 12) * 12);-ms-flex-preferred-size:calc((100% / 12) * 12);flex-basis:calc((100% / 12) * 12)}.offset-1-desk{margin-left:-webkit-calc(100% / 12);margin-left:calc(100% / 12)}.offset-2-desk{margin-left:-webkit-calc((100% / 12) * 2);margin-left:calc((100% / 12) * 2)}.offset-3-desk{margin-left:-webkit-calc((100% / 12) * 3);margin-left:calc((100% / 12) * 3)}.offset-4-desk{margin-left:-webkit-calc((100% / 12) * 4);margin-left:calc((100% / 12) * 4)}.offset-5-desk{margin-left:-webkit-calc((100% / 12) * 5);margin-left:calc((100% / 12) * 5)}.offset-6-desk{margin-left:-webkit-calc((100% / 12) * 6);margin-left:calc((100% / 12) * 6)}.offset-7-desk{margin-left:-webkit-calc((100% / 12) * 7);margin-left:calc((100% / 12) * 7)}.offset-8-desk{margin-left:-webkit-calc((100% / 12) * 8);margin-left:calc((100% / 12) * 8)}.offset-9-desk{margin-left:-webkit-calc((100% / 12) * 9);margin-left:calc((100% / 12) * 9)}.offset-10-desk{margin-left:-webkit-calc((100% / 12) * 10);margin-left:calc((100% / 12) * 10)}.offset-11-desk{margin-left:-webkit-calc((100% / 12) * 11);margin-left:calc((100% / 12) * 11)}.start-desk{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-desk{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-desk{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-desk{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-desk{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-desk{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-desk{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-desk{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-desk{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-desk{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}}@media only screen and (min-width:75em){.column-1-wall{-webkit-flex-basis:-webkit-calc(100% / 12);-ms-flex-preferred-size:calc(100% / 12);flex-basis:calc(100% / 12)}.column-2-wall{-webkit-flex-basis:-webkit-calc((100% / 12) * 2);-ms-flex-preferred-size:calc((100% / 12) * 2);flex-basis:calc((100% / 12) * 2)}.column-3-wall{-webkit-flex-basis:-webkit-calc((100% / 12) * 3);-ms-flex-preferred-size:calc((100% / 12) * 3);flex-basis:calc((100% / 12) * 3)}.column-4-wall{-webkit-flex-basis:-webkit-calc((100% / 12) * 4);-ms-flex-preferred-size:calc((100% / 12) * 4);flex-basis:calc((100% / 12) * 4)}.column-5-wall{-webkit-flex-basis:-webkit-calc((100% / 12) * 5);-ms-flex-preferred-size:calc((100% / 12) * 5);flex-basis:calc((100% / 12) * 5)}.column-6-wall{-webkit-flex-basis:-webkit-calc((100% / 12) * 6);-ms-flex-preferred-size:calc((100% / 12) * 6);flex-basis:calc((100% / 12) * 6)}.column-7-wall{-webkit-flex-basis:-webkit-calc((100% / 12) * 7);-ms-flex-preferred-size:calc((100% / 12) * 7);flex-basis:calc((100% / 12) * 7)}.column-8-wall{-webkit-flex-basis:-webkit-calc((100% / 12) * 8);-ms-flex-preferred-size:calc((100% / 12) * 8);flex-basis:calc((100% / 12) * 8)}.column-9-wall{-webkit-flex-basis:-webkit-calc((100% / 12) * 9);-ms-flex-preferred-size:calc((100% / 12) * 9);flex-basis:calc((100% / 12) * 9)}.column-10-wall{-webkit-flex-basis:-webkit-calc((100% / 12) * 10);-ms-flex-preferred-size:calc((100% / 12) * 10);flex-basis:calc((100% / 12) * 10)}.column-11-wall{-webkit-flex-basis:-webkit-calc((100% / 12) * 11);-ms-flex-preferred-size:calc((100% / 12) * 11);flex-basis:calc((100% / 12) * 11)}.column-12-wall{-webkit-flex-basis:-webkit-calc((100% / 12) * 12);-ms-flex-preferred-size:calc((100% / 12) * 12);flex-basis:calc((100% / 12) * 12)}.offset-1-wall{margin-left:-webkit-calc(100% / 12);margin-left:calc(100% / 12)}.offset-2-wall{margin-left:-webkit-calc((100% / 12) * 2);margin-left:calc((100% / 12) * 2)}.offset-3-wall{margin-left:-webkit-calc((100% / 12) * 3);margin-left:calc((100% / 12) * 3)}.offset-4-wall{margin-left:-webkit-calc((100% / 12) * 4);margin-left:calc((100% / 12) * 4)}.offset-5-wall{margin-left:-webkit-calc((100% / 12) * 5);margin-left:calc((100% / 12) * 5)}.offset-6-wall{margin-left:-webkit-calc((100% / 12) * 6);margin-left:calc((100% / 12) * 6)}.offset-7-wall{margin-left:-webkit-calc((100% / 12) * 7);margin-left:calc((100% / 12) * 7)}.offset-8-wall{margin-left:-webkit-calc((100% / 12) * 8);margin-left:calc((100% / 12) * 8)}.offset-9-wall{margin-left:-webkit-calc((100% / 12) * 9);margin-left:calc((100% / 12) * 9)}.offset-10-wall{margin-left:-webkit-calc((100% / 12) * 10);margin-left:calc((100% / 12) * 10)}.offset-11-wall{margin-left:-webkit-calc((100% / 12) * 11);margin-left:calc((100% / 12) * 11)}.start-wall{-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;text-align:start}.center-wall{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.end-wall{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;text-align:end}.top-wall{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.middle-wall{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.bottom-wall{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}.around-wall{-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}.between-wall{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}.first-wall{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.last-wall{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}} |