.flex() { 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; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .vertical() { /* 09版 */ -webkit-box-orient: vertical; /* 12版 */ -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } .horizontal() { /* 09版 */ -webkit-box-orient: horizontal; /* 12版 */ -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; } .bi-f-s-v { & .f-s-v-w { .flex(); .vertical(); /* 09版 */ -webkit-box-pack: flex-start; /* 12版 */ -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -ms-flex-pack: start; -o-justify-content: flex-start; justify-content: flex-start; /* 09版 */ -webkit-box-align: flex-start; /* 12版 */ -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -ms-flex-align: start; -o-align-items: flex-start; align-items: flex-start; /* 09版 */ /*-webkit-box-lines: multiple;*/ /* 12版 */ -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap; min-width: 100%; &.h-center { /* 09版 */ -webkit-box-align: center; /* 12版 */ -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -ms-flex-align: center; -o-align-items: center; align-items: center; &.v-middle { min-height: 100%; float: left; } } &.h-right { /* 09版 */ -webkit-box-align: flex-end; /* 12版 */ -webkit-align-items: flex-end; -moz-align-items: flex-end; -ms-align-items: flex-end; -ms-flex-align: end; -o-align-items: flex-end; align-items: flex-end; } &.h-stretch { /* 09版 */ -webkit-box-align: stretch; /* 12版 */ -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; -ms-flex-align: stretch; -o-align-items: stretch; align-items: stretch; } &.v-middle { /* 09版 */ -webkit-box-pack: center; /* 12版 */ -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; -ms-flex-pack: center; justify-content: center; } &.v-bottom { /* 09版 */ -webkit-box-pack: flex-end; /* 12版 */ -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -ms-flex-pack: end; -o-justify-content: flex-end; justify-content: flex-end; } > .shrink-none { -webkit-flex-shrink: 0; -moz-flex-shrink: 0; -ms-flex-shrink: 0; flex-shrink: 0; } > .fill { -webkit-flex-grow: 1; -moz-flex-grow: 1; -ms-flex-grow: 1; flex-grow: 1; } } }