Created
February 12, 2017 15:55
-
-
Save vace/f7b24d80aee0a3567652694d847783ff to your computer and use it in GitHub Desktop.
css3 flex layout
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.row { | |
box-sizing: border-box; | |
display: -webkit-flex; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-flex: 0 1 auto; | |
-ms-flex: 0 1 auto; | |
flex: 0 1 auto; | |
-webkit-flex-direction: row; | |
-ms-flex-direction: row; | |
flex-direction: row; | |
-webkit-flex-wrap: wrap; | |
-ms-flex-wrap: wrap; | |
flex-wrap: wrap; | |
box-orient: horizontal; | |
} | |
.row.reverse { | |
-webkit-flex-direction: row-reverse; | |
-ms-flex-direction: row-reverse; | |
flex-direction: row-reverse; | |
} | |
.row.column { | |
-webkit-flex-direction: column; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
} | |
.row.column-reverse { | |
-webkit-flex-direction: column-reverse; | |
-ms-flex-direction: column-reverse; | |
flex-direction: column-reverse; | |
} | |
.row.start { | |
-webkit-justify-content: flex-start; | |
-ms-flex-pack: start; | |
justify-content: flex-start; | |
} | |
.row.center { | |
-webkit-justify-content: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
} | |
.row.end { | |
-webkit-justify-content: flex-end; | |
-ms-flex-pack: end; | |
justify-content: flex-end; | |
} | |
.row.around { | |
-webkit-justify-content: space-around; | |
-ms-flex-pack: distribute; | |
justify-content: space-around; | |
} | |
.row.between { | |
-webkit-justify-content: space-between; | |
-ms-flex-pack: justify; | |
justify-content: space-between; | |
} | |
.row.top { | |
-webkit-align-items: flex-start; | |
-ms-flex-align: start; | |
align-items: flex-start; | |
} | |
.row.middle { | |
-webkit-align-items: center; | |
-ms-flex-align: center; | |
align-items: center; | |
} | |
.row.down { | |
-webkit-align-items: flex-end; | |
-ms-flex-align: end; | |
align-items: flex-end; | |
} | |
.row.stretch { | |
-webkit-align-items: stretch; | |
-ms-flex-align: stretch; | |
align-items: stretch; | |
} | |
.row.baseline { | |
-webkit-align-items: baseline; | |
-ms-flex-align: baseline; | |
align-items: baseline; | |
} | |
.row > .first { | |
-webkit-order: 1; | |
-ms-flex-order: 1; | |
order: 1; | |
} | |
.row > .last { | |
-webkit-order: -1; | |
-ms-flex-order: -1; | |
order: -1; | |
} | |
[class*=col] { | |
box-sizing: border-box; | |
-webkit-flex: 0 0 auto; | |
-ms-flex: 0 0 auto; | |
flex: 0 0 auto; | |
} | |
.col { | |
-webkit-flex: 1; | |
-ms-flex: 1; | |
flex: 1; | |
-webkit-flex-grow: 1; | |
-ms-flex-positive: 1; | |
flex-grow: 1; | |
-webkit-flex-basis: 0; | |
-ms-flex-preferred-size: 0; | |
flex-basis: 0; | |
max-width: 100%; | |
} | |
.col-0 { | |
-webkit-flex-basis: 0%; | |
-ms-flex-preferred-size: 0%; | |
flex-basis: 0%; | |
max-width: 0%; | |
} | |
.col-o-0 { | |
margin-left: 0%; | |
} | |
.col-1 { | |
-webkit-flex-basis: 8.33333333%; | |
-ms-flex-preferred-size: 8.33333333%; | |
flex-basis: 8.33333333%; | |
max-width: 8.33333333%; | |
} | |
.col-o-1 { | |
margin-left: 8.33333333%; | |
} | |
.col-2 { | |
-webkit-flex-basis: 16.66666667%; | |
-ms-flex-preferred-size: 16.66666667%; | |
flex-basis: 16.66666667%; | |
max-width: 16.66666667%; | |
} | |
.col-o-2 { | |
margin-left: 16.66666667%; | |
} | |
.col-3 { | |
-webkit-flex-basis: 25%; | |
-ms-flex-preferred-size: 25%; | |
flex-basis: 25%; | |
max-width: 25%; | |
} | |
.col-o-3 { | |
margin-left: 25%; | |
} | |
.col-4 { | |
-webkit-flex-basis: 33.33333333%; | |
-ms-flex-preferred-size: 33.33333333%; | |
flex-basis: 33.33333333%; | |
max-width: 33.33333333%; | |
} | |
.col-o-4 { | |
margin-left: 33.33333333%; | |
} | |
.col-5 { | |
-webkit-flex-basis: 41.66666667%; | |
-ms-flex-preferred-size: 41.66666667%; | |
flex-basis: 41.66666667%; | |
max-width: 41.66666667%; | |
} | |
.col-o-5 { | |
margin-left: 41.66666667%; | |
} | |
.col-6 { | |
-webkit-flex-basis: 50%; | |
-ms-flex-preferred-size: 50%; | |
flex-basis: 50%; | |
max-width: 50%; | |
} | |
.col-o-6 { | |
margin-left: 50%; | |
} | |
.col-7 { | |
-webkit-flex-basis: 58.33333333%; | |
-ms-flex-preferred-size: 58.33333333%; | |
flex-basis: 58.33333333%; | |
max-width: 58.33333333%; | |
} | |
.col-o-7 { | |
margin-left: 58.33333333%; | |
} | |
.col-8 { | |
-webkit-flex-basis: 66.66666667%; | |
-ms-flex-preferred-size: 66.66666667%; | |
flex-basis: 66.66666667%; | |
max-width: 66.66666667%; | |
} | |
.col-o-8 { | |
margin-left: 66.66666667%; | |
} | |
.col-9 { | |
-webkit-flex-basis: 75%; | |
-ms-flex-preferred-size: 75%; | |
flex-basis: 75%; | |
max-width: 75%; | |
} | |
.col-o-9 { | |
margin-left: 75%; | |
} | |
.col-10 { | |
-webkit-flex-basis: 83.33333333%; | |
-ms-flex-preferred-size: 83.33333333%; | |
flex-basis: 83.33333333%; | |
max-width: 83.33333333%; | |
} | |
.col-o-10 { | |
margin-left: 83.33333333%; | |
} | |
.col-11 { | |
-webkit-flex-basis: 91.66666667%; | |
-ms-flex-preferred-size: 91.66666667%; | |
flex-basis: 91.66666667%; | |
max-width: 91.66666667%; | |
} | |
.col-o-11 { | |
margin-left: 91.66666667%; | |
} | |
.col-12 { | |
-webkit-flex-basis: 100%; | |
-ms-flex-preferred-size: 100%; | |
flex-basis: 100%; | |
max-width: 100%; | |
} | |
.col-o-12 { | |
margin-left: 100%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment