@mixin flex() { display: -webkit-flex; display: flex; // display: -webkit-box; display: -moz-box; // display: -ms-flexbox; } @mixin flexv() { -webkit-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @mixin flex-1 { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } @mixin flex-wrap { -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-line: multiple; } @mixin flex-justify-start { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; } @mixin flex-justify-end { -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-justify-content: flex-end; justify-content: flex-end; } @mixin flex-justify-between { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; } @mixin flex-justify-around { -webkit-box-pack: justify; -webkit-justify-content: space-around; -ms-justify-content: space-around; justify-content: space-around; } @mixin flex-justify-center { -webkit-box-pack: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; } @mixin flex-align-start { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; } @mixin flex-align-end { -webkit-box-align: end; -webkit-align-items: flex-end; -ms-align-items: flex-end; align-items: flex-end; } @mixin flex-align-baseline { -webkit-box-align: baseline; -webkit-align-items: baseline; -ms-align-items: baseline; align-items: baseline; } @mixin flex-align-stretch { -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-align-items: stretch; align-items: stretch; } @mixin flex-align-center { -webkit-box-align: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; } @mixin flex-order($num) { box-order: $num; -webkit-box-order: $num; -moz-box-order: $num; order: $num; -webkit-order: $num; }