Skip to content

Instantly share code, notes, and snippets.

Created July 24, 2013 18:42
Show Gist options
  • Save anonymous/6073277 to your computer and use it in GitHub Desktop.
Save anonymous/6073277 to your computer and use it in GitHub Desktop.
Less Mixins to help cross-browser flexbox model
.display-box() {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
display: box;
}
.box-direction(@value) {
-webkit-flex-direction: @value;
-moz-flex-direction: @value;
-ms-flex-direction: @value;
flex-direction: @value;
}
.box-wrap(@value) {
-webkit-flex-wrap: @value;
-moz-flex-wrap: @value;
-ms-flex-wrap: @value;
flex-wrap: @value;
}
.box-align(@value) {
-webkit-box-align: @value;
-moz-box-align: @value;
-ms-flex-align: @value;
box-align: @value;
}
.box-pack(@value) {
-webkit-box-pack: @value;
-moz-box-pack: @value;
-ms-flex-pack: @value;
box-pack: @value;
}
.box-flex(@positive: 0, @negative: 0, @preferred: auto ) {
-webkit-flex: @positive @negative @preferred;
-moz-box-flex: @positive;
-ms-flex: @positive @negative @preferred;
flex: @positive @negative @preferred;
box-flex: @positive;
}
.align-start() {
.box-align(center);
-webkit-align-items: flex-start;
align-items: flex-start;
}
.align-center() {
.box-align(center);
-webkit-align-items: center;
align-items: center;
}
.align-end() {
.box-align(end);
-webkit-align-items: flex-end;
align-items: flex-end;
}
.justify-content() {
.box-pack(justify);
-webkit-justify-content: space-between;
justify-content: space-between;
}
.center-content() {
.box-pack(center);
-webkit-justify-content: center;
justify-content: center;
}
.end-content() {
.box-pack(end);
-webkit-justify-content: end;
justify-content: end;
}
.start-content() {
.box-pack(end);
-webkit-justify-content: center;
justify-content: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment