├── LICENSE ├── README.md ├── index.html └── style.css /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015, Kristofer Joseph 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | 7 | * Redistributions of source code must retain the above copyright notice, this 8 | list of conditions and the following disclaimer. 9 | 10 | * Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 15 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 16 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 17 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 18 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 19 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 20 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 21 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 22 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 23 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # flextable 2 | Example `flexbox` based grid with a comparable `display:table` fallback 3 | 4 | The goal of this repo is to illustrate the simplest flexbox grid with the simplest fallback. 5 | 6 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Flexbox grid with display:table Fallback 7 | 8 | 26 | 34 | 35 | 36 | 37 |
38 |
39 |
40 |
41 |
One
42 |
43 |
44 |
Two
45 |
46 |
47 |
Three
48 |
49 |
50 |
51 |
52 |
One
53 |
54 |
55 |
Two
56 |
57 |
58 |
59 |
60 |
One
61 |
62 |
63 |
64 |
65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | .grid-container { 2 | margin: 0 auto; 3 | } 4 | 5 | .grid-padded { 6 | padding: 0 2rem; 7 | } 8 | 9 | .grid-gutters > .grid-row { 10 | margin-left: -1rem; 11 | } 12 | 13 | .grid-gutters > .grid-row > .grid-column { 14 | padding: 1rem 0 0 1rem; 15 | } 16 | 17 | .grid-row { 18 | display: flex; 19 | flex-wrap: wrap; 20 | } 21 | 22 | .grid-column { 23 | display: flex; 24 | flex-direction: column; 25 | flex-grow: 1; 26 | } 27 | 28 | /* `display: table` fallback for nevergreen browsers */ 29 | /* It is meant to be used with JS in the page */ 30 | /* which appends the `.no-flexbox` class to the tag */ 31 | 32 | .no-flexbox .grid-gutters { 33 | border-spacing: 1rem 0; 34 | } 35 | 36 | .no-flexbox .grid-gutters > .grid-row { 37 | margin-left: 0; 38 | } 39 | 40 | .no-flexbox .grid-gutters > .grid-row > .grid-column { 41 | padding: 1rem 0 0 0; 42 | } 43 | 44 | .no-flexbox .grid-row { 45 | display: block; 46 | width: 100%; 47 | } 48 | 49 | .no-flexbox .grid-column { 50 | display: block; 51 | } 52 | 53 | @media only screen and (min-width: 21em) { 54 | .no-flexbox .grid-row { 55 | display: table; 56 | table-layout: fixed; 57 | width: 100%; 58 | } 59 | 60 | .no-flexbox .grid-column { 61 | display: table-cell; 62 | } 63 | } 64 | --------------------------------------------------------------------------------