Skip to content

Instantly share code, notes, and snippets.

@roadev
Created Jan 14, 2017
Embed
What would you like to do?
flexbox based grid
.col-0, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
flex: 0 0 auto;
padding: 0 1% 0 1%;
}
.container {
margin: 0 auto 0 auto;
padding: 0 2% 0 0;
max-width: 98%;
}
.row {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
flex-direction: row;
flex-wrap: wrap;
margin-right: -1%;
margin-left: -1%;
}
.row.reverse {
flex-direction: row-reverse;
}
.col-0 {
flex-grow: 1;
flex-basis: 0;
max-width: 100%;
}
.col-1 {
flex-basis: 8.333%;
max-width: 8.333%;
}
.col-2 {
flex-basis: 16.667%;
max-width: 16.667%;
}
.col-3 {
flex-basis: 25%;
max-width: 25%;
}
.col-4 {
flex-basis: 33.333%;
max-width: 33.333%;
}
.col-5 {
flex-basis: 41.667%;
max-width: 41.667%;
}
.col-6 {
flex-basis: 50%;
max-width: 50%;
}
.col-7 {
flex-basis: 58.333%;
max-width: 58.333%;
}
.col-8 {
flex-basis: 66.667%;
max-width: 66.667%;
}
.col-9 {
flex-basis: 75%;
max-width: 75%;
}
.col-10 {
flex-basis: 83.333%;
max-width: 83.333%;
}
.col-11 {
flex-basis: 91.667%;
max-width: 91.667%;
}
.col-12 {
flex-basis: 100%;
max-width: 100%;
}
.col-offset-1 {
margin-left: 8.333%;
}
.col-offset-2 {
margin-left: 16.667%;
}
.col-offset-3 {
margin-left: 25%;
}
.col-offset-4 {
margin-left: 33.333%;
}
.col-offset-5 {
margin-left: 41.667%;
}
.col-offset-6 {
margin-left: 50%;
}
.col-offset-7 {
margin-left: 58.333%;
}
.col-offset-8 {
margin-left: 66.667%;
}
.col-offset-9 {
margin-left: 75%;
}
.col-offset-10 {
margin-left: 83.333%;
}
.col-offset-11 {
margin-left: 91.667%;
}
.start {
justify-content: flex-start;
text-align: start;
}
.center {
justify-content: center;
text-align: center;
}
.end {
justify-content: flex-end;
text-align: end;
}
.top {
align-items: flex-start;
}
.middle {
align-items: center;
}
.bottom {
align-items: flex-end;
}
.around {
justify-content: space-around;
}
.between {
justify-content: space-between;
}
.first {
order: -1;
}
.last {
order: 1;
}
.col.reverse {
flex-direction: column-reverse;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment