@medyll/cssfabric 0.0.10

package/lib/styles/core/flex/flex.responsive.css

@@ -0,0 +1,852 @@
+@media only screen and (max-width: 0rem) {
+  .flex-xxxl-h {
+    display: flex;
+    flex-direction: row;
+  }
+  .flex-xxxl-h > .flex-main {
+    flex: 1 1 0;
+  }
+  .flex-xxxl-h.align-middle, .flex-xxxl-h.flex-align-middle {
+    align-items: center;
+  }
+  .flex-xxxl-h.align-top, .flex-xxxl-h.flex-align-top {
+    align-items: flex-start;
+  }
+  .flex-xxxl-h.align-left, .flex-xxxl-h.flex-align-left {
+    align-items: flex-start;
+  }
+  .flex-xxxl-h.align-right, .flex-xxxl-h.flex-align-right {
+    justify-content: flex-end;
+  }
+  .flex-xxxl-h.align-bottom, .flex-xxxl-h.flex-align-bottom {
+    align-items: flex-end;
+  }
+  .flex-xxxl-h.align-center, .flex-xxxl-h.flex-align-center {
+    justify-content: center;
+  }
+  .flex-xxxl-h.align-middle-center, .flex-xxxl-h.flex-align-middle-center {
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+  }
+  .flex-xxxl-h.align-stretch, .flex-xxxl-h.flex-align-stretch {
+    color: blue;
+    align-items: stretch;
+  }
+
+  .flex-xxxl-v {
+    display: flex;
+    flex-direction: column;
+  }
+  .flex-xxxl-v > .flex-main {
+    flex: 1 1 0;
+    max-height: 100%;
+  }
+  .flex-xxxl-v.align-middle, .flex-xxxl-v.flex-align-middle {
+    justify-content: center;
+  }
+  .flex-xxxl-v.align-top, .flex-xxxl-v.flex-align-top {
+    justify-content: flex-start;
+  }
+  .flex-xxxl-v.align-left, .flex-xxxl-v.flex-align-left {
+    align-items: flex-start;
+  }
+  .flex-xxxl-v.align-right, .flex-xxxl-v.flex-align-right {
+    align-items: flex-end;
+  }
+  .flex-xxxl-v.align-bottom, .flex-xxxl-v.flex-align-bottom {
+    justify-content: flex-end;
+  }
+  .flex-xxxl-v.align-center, .flex-xxxl-v.flex-align-center {
+    align-items: center;
+  }
+  .flex-xxxl-v.align-middle-center, .flex-xxxl-v.flex-align-middle-center {
+    align-items: center;
+    justify-content: center;
+  }
+  .flex-xxxl-v.align-stretch, .flex-xxxl-v.flex-align-stretch {
+    color: red;
+    align-items: stretch;
+  }
+
+  .flex-xxxl-h,
+.flex-xxxl-v {
+    box-sizing: border-box;
+  }
+  .flex-xxxl-h > *,
+.flex-xxxl-v > * {
+    box-sizing: border-box;
+  }
+  .flex-xxxl-h > *:not(.flex-main),
+.flex-xxxl-v > *:not(.flex-main) {
+    flex: 0 0 auto;
+  }
+  .flex-xxxl-h.flex-inline,
+.flex-xxxl-v.flex-inline {
+    display: inline-flex;
+  }
+  .flex-xxxl-h .flex-grow-1,
+.flex-xxxl-v .flex-grow-1 {
+    flex-grow: 1;
+  }
+  .flex-xxxl-h .flex-shrink-1,
+.flex-xxxl-v .flex-shrink-1 {
+    flex-shrink: 1;
+  }
+  .flex-xxxl-h .flex-grow-2,
+.flex-xxxl-v .flex-grow-2 {
+    flex-grow: 2;
+  }
+  .flex-xxxl-h .flex-shrink-2,
+.flex-xxxl-v .flex-shrink-2 {
+    flex-shrink: 2;
+  }
+  .flex-xxxl-h .flex-grow-3,
+.flex-xxxl-v .flex-grow-3 {
+    flex-grow: 3;
+  }
+  .flex-xxxl-h .flex-shrink-3,
+.flex-xxxl-v .flex-shrink-3 {
+    flex-shrink: 3;
+  }
+  .flex-xxxl-h .flex-grow-4,
+.flex-xxxl-v .flex-grow-4 {
+    flex-grow: 4;
+  }
+  .flex-xxxl-h .flex-shrink-4,
+.flex-xxxl-v .flex-shrink-4 {
+    flex-shrink: 4;
+  }
+
+  /** raw css properties distribution */
+  .flex-xxxl-h.flex-wrap,
+.flex-xxxl-v.flex-wrap {
+    flex-wrap: wrap;
+  }
+  .flex-xxxl-h.flex-wrap-reverse,
+.flex-xxxl-v.flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+  .flex-xxxl-h .self-start,
+.flex-xxxl-v .self-start {
+    align-self: flex-start;
+  }
+  .flex-xxxl-h .self-end,
+.flex-xxxl-v .self-end {
+    align-self: flex-end;
+  }
+  .flex-xxxl-h .self-stretch,
+.flex-xxxl-v .self-stretch {
+    align-self: stretch;
+  }
+}
+@media only screen and (max-width: 120rem) {
+  .flex-xxl-h {
+    display: flex;
+    flex-direction: row;
+  }
+  .flex-xxl-h > .flex-main {
+    flex: 1 1 0;
+  }
+  .flex-xxl-h.align-middle, .flex-xxl-h.flex-align-middle {
+    align-items: center;
+  }
+  .flex-xxl-h.align-top, .flex-xxl-h.flex-align-top {
+    align-items: flex-start;
+  }
+  .flex-xxl-h.align-left, .flex-xxl-h.flex-align-left {
+    align-items: flex-start;
+  }
+  .flex-xxl-h.align-right, .flex-xxl-h.flex-align-right {
+    justify-content: flex-end;
+  }
+  .flex-xxl-h.align-bottom, .flex-xxl-h.flex-align-bottom {
+    align-items: flex-end;
+  }
+  .flex-xxl-h.align-center, .flex-xxl-h.flex-align-center {
+    justify-content: center;
+  }
+  .flex-xxl-h.align-middle-center, .flex-xxl-h.flex-align-middle-center {
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+  }
+  .flex-xxl-h.align-stretch, .flex-xxl-h.flex-align-stretch {
+    color: blue;
+    align-items: stretch;
+  }
+
+  .flex-xxl-v {
+    display: flex;
+    flex-direction: column;
+  }
+  .flex-xxl-v > .flex-main {
+    flex: 1 1 0;
+    max-height: 100%;
+  }
+  .flex-xxl-v.align-middle, .flex-xxl-v.flex-align-middle {
+    justify-content: center;
+  }
+  .flex-xxl-v.align-top, .flex-xxl-v.flex-align-top {
+    justify-content: flex-start;
+  }
+  .flex-xxl-v.align-left, .flex-xxl-v.flex-align-left {
+    align-items: flex-start;
+  }
+  .flex-xxl-v.align-right, .flex-xxl-v.flex-align-right {
+    align-items: flex-end;
+  }
+  .flex-xxl-v.align-bottom, .flex-xxl-v.flex-align-bottom {
+    justify-content: flex-end;
+  }
+  .flex-xxl-v.align-center, .flex-xxl-v.flex-align-center {
+    align-items: center;
+  }
+  .flex-xxl-v.align-middle-center, .flex-xxl-v.flex-align-middle-center {
+    align-items: center;
+    justify-content: center;
+  }
+  .flex-xxl-v.align-stretch, .flex-xxl-v.flex-align-stretch {
+    color: red;
+    align-items: stretch;
+  }
+
+  .flex-xxl-h,
+.flex-xxl-v {
+    box-sizing: border-box;
+  }
+  .flex-xxl-h > *,
+.flex-xxl-v > * {
+    box-sizing: border-box;
+  }
+  .flex-xxl-h > *:not(.flex-main),
+.flex-xxl-v > *:not(.flex-main) {
+    flex: 0 0 auto;
+  }
+  .flex-xxl-h.flex-inline,
+.flex-xxl-v.flex-inline {
+    display: inline-flex;
+  }
+  .flex-xxl-h .flex-grow-1,
+.flex-xxl-v .flex-grow-1 {
+    flex-grow: 1;
+  }
+  .flex-xxl-h .flex-shrink-1,
+.flex-xxl-v .flex-shrink-1 {
+    flex-shrink: 1;
+  }
+  .flex-xxl-h .flex-grow-2,
+.flex-xxl-v .flex-grow-2 {
+    flex-grow: 2;
+  }
+  .flex-xxl-h .flex-shrink-2,
+.flex-xxl-v .flex-shrink-2 {
+    flex-shrink: 2;
+  }
+  .flex-xxl-h .flex-grow-3,
+.flex-xxl-v .flex-grow-3 {
+    flex-grow: 3;
+  }
+  .flex-xxl-h .flex-shrink-3,
+.flex-xxl-v .flex-shrink-3 {
+    flex-shrink: 3;
+  }
+  .flex-xxl-h .flex-grow-4,
+.flex-xxl-v .flex-grow-4 {
+    flex-grow: 4;
+  }
+  .flex-xxl-h .flex-shrink-4,
+.flex-xxl-v .flex-shrink-4 {
+    flex-shrink: 4;
+  }
+
+  /** raw css properties distribution */
+  .flex-xxl-h.flex-wrap,
+.flex-xxl-v.flex-wrap {
+    flex-wrap: wrap;
+  }
+  .flex-xxl-h.flex-wrap-reverse,
+.flex-xxl-v.flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+  .flex-xxl-h .self-start,
+.flex-xxl-v .self-start {
+    align-self: flex-start;
+  }
+  .flex-xxl-h .self-end,
+.flex-xxl-v .self-end {
+    align-self: flex-end;
+  }
+  .flex-xxl-h .self-stretch,
+.flex-xxl-v .self-stretch {
+    align-self: stretch;
+  }
+}
+@media only screen and (max-width: 90rem) {
+  .flex-xl-h {
+    display: flex;
+    flex-direction: row;
+  }
+  .flex-xl-h > .flex-main {
+    flex: 1 1 0;
+  }
+  .flex-xl-h.align-middle, .flex-xl-h.flex-align-middle {
+    align-items: center;
+  }
+  .flex-xl-h.align-top, .flex-xl-h.flex-align-top {
+    align-items: flex-start;
+  }
+  .flex-xl-h.align-left, .flex-xl-h.flex-align-left {
+    align-items: flex-start;
+  }
+  .flex-xl-h.align-right, .flex-xl-h.flex-align-right {
+    justify-content: flex-end;
+  }
+  .flex-xl-h.align-bottom, .flex-xl-h.flex-align-bottom {
+    align-items: flex-end;
+  }
+  .flex-xl-h.align-center, .flex-xl-h.flex-align-center {
+    justify-content: center;
+  }
+  .flex-xl-h.align-middle-center, .flex-xl-h.flex-align-middle-center {
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+  }
+  .flex-xl-h.align-stretch, .flex-xl-h.flex-align-stretch {
+    color: blue;
+    align-items: stretch;
+  }
+
+  .flex-xl-v {
+    display: flex;
+    flex-direction: column;
+  }
+  .flex-xl-v > .flex-main {
+    flex: 1 1 0;
+    max-height: 100%;
+  }
+  .flex-xl-v.align-middle, .flex-xl-v.flex-align-middle {
+    justify-content: center;
+  }
+  .flex-xl-v.align-top, .flex-xl-v.flex-align-top {
+    justify-content: flex-start;
+  }
+  .flex-xl-v.align-left, .flex-xl-v.flex-align-left {
+    align-items: flex-start;
+  }
+  .flex-xl-v.align-right, .flex-xl-v.flex-align-right {
+    align-items: flex-end;
+  }
+  .flex-xl-v.align-bottom, .flex-xl-v.flex-align-bottom {
+    justify-content: flex-end;
+  }
+  .flex-xl-v.align-center, .flex-xl-v.flex-align-center {
+    align-items: center;
+  }
+  .flex-xl-v.align-middle-center, .flex-xl-v.flex-align-middle-center {
+    align-items: center;
+    justify-content: center;
+  }
+  .flex-xl-v.align-stretch, .flex-xl-v.flex-align-stretch {
+    color: red;
+    align-items: stretch;
+  }
+
+  .flex-xl-h,
+.flex-xl-v {
+    box-sizing: border-box;
+  }
+  .flex-xl-h > *,
+.flex-xl-v > * {
+    box-sizing: border-box;
+  }
+  .flex-xl-h > *:not(.flex-main),
+.flex-xl-v > *:not(.flex-main) {
+    flex: 0 0 auto;
+  }
+  .flex-xl-h.flex-inline,
+.flex-xl-v.flex-inline {
+    display: inline-flex;
+  }
+  .flex-xl-h .flex-grow-1,
+.flex-xl-v .flex-grow-1 {
+    flex-grow: 1;
+  }
+  .flex-xl-h .flex-shrink-1,
+.flex-xl-v .flex-shrink-1 {
+    flex-shrink: 1;
+  }
+  .flex-xl-h .flex-grow-2,
+.flex-xl-v .flex-grow-2 {
+    flex-grow: 2;
+  }
+  .flex-xl-h .flex-shrink-2,
+.flex-xl-v .flex-shrink-2 {
+    flex-shrink: 2;
+  }
+  .flex-xl-h .flex-grow-3,
+.flex-xl-v .flex-grow-3 {
+    flex-grow: 3;
+  }
+  .flex-xl-h .flex-shrink-3,
+.flex-xl-v .flex-shrink-3 {
+    flex-shrink: 3;
+  }
+  .flex-xl-h .flex-grow-4,
+.flex-xl-v .flex-grow-4 {
+    flex-grow: 4;
+  }
+  .flex-xl-h .flex-shrink-4,
+.flex-xl-v .flex-shrink-4 {
+    flex-shrink: 4;
+  }
+
+  /** raw css properties distribution */
+  .flex-xl-h.flex-wrap,
+.flex-xl-v.flex-wrap {
+    flex-wrap: wrap;
+  }
+  .flex-xl-h.flex-wrap-reverse,
+.flex-xl-v.flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+  .flex-xl-h .self-start,
+.flex-xl-v .self-start {
+    align-self: flex-start;
+  }
+  .flex-xl-h .self-end,
+.flex-xl-v .self-end {
+    align-self: flex-end;
+  }
+  .flex-xl-h .self-stretch,
+.flex-xl-v .self-stretch {
+    align-self: stretch;
+  }
+}
+@media only screen and (max-width: 64rem) {
+  .flex-lg-h {
+    display: flex;
+    flex-direction: row;
+  }
+  .flex-lg-h > .flex-main {
+    flex: 1 1 0;
+  }
+  .flex-lg-h.align-middle, .flex-lg-h.flex-align-middle {
+    align-items: center;
+  }
+  .flex-lg-h.align-top, .flex-lg-h.flex-align-top {
+    align-items: flex-start;
+  }
+  .flex-lg-h.align-left, .flex-lg-h.flex-align-left {
+    align-items: flex-start;
+  }
+  .flex-lg-h.align-right, .flex-lg-h.flex-align-right {
+    justify-content: flex-end;
+  }
+  .flex-lg-h.align-bottom, .flex-lg-h.flex-align-bottom {
+    align-items: flex-end;
+  }
+  .flex-lg-h.align-center, .flex-lg-h.flex-align-center {
+    justify-content: center;
+  }
+  .flex-lg-h.align-middle-center, .flex-lg-h.flex-align-middle-center {
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+  }
+  .flex-lg-h.align-stretch, .flex-lg-h.flex-align-stretch {
+    color: blue;
+    align-items: stretch;
+  }
+
+  .flex-lg-v {
+    display: flex;
+    flex-direction: column;
+  }
+  .flex-lg-v > .flex-main {
+    flex: 1 1 0;
+    max-height: 100%;
+  }
+  .flex-lg-v.align-middle, .flex-lg-v.flex-align-middle {
+    justify-content: center;
+  }
+  .flex-lg-v.align-top, .flex-lg-v.flex-align-top {
+    justify-content: flex-start;
+  }
+  .flex-lg-v.align-left, .flex-lg-v.flex-align-left {
+    align-items: flex-start;
+  }
+  .flex-lg-v.align-right, .flex-lg-v.flex-align-right {
+    align-items: flex-end;
+  }
+  .flex-lg-v.align-bottom, .flex-lg-v.flex-align-bottom {
+    justify-content: flex-end;
+  }
+  .flex-lg-v.align-center, .flex-lg-v.flex-align-center {
+    align-items: center;
+  }
+  .flex-lg-v.align-middle-center, .flex-lg-v.flex-align-middle-center {
+    align-items: center;
+    justify-content: center;
+  }
+  .flex-lg-v.align-stretch, .flex-lg-v.flex-align-stretch {
+    color: red;
+    align-items: stretch;
+  }
+
+  .flex-lg-h,
+.flex-lg-v {
+    box-sizing: border-box;
+  }
+  .flex-lg-h > *,
+.flex-lg-v > * {
+    box-sizing: border-box;
+  }
+  .flex-lg-h > *:not(.flex-main),
+.flex-lg-v > *:not(.flex-main) {
+    flex: 0 0 auto;
+  }
+  .flex-lg-h.flex-inline,
+.flex-lg-v.flex-inline {
+    display: inline-flex;
+  }
+  .flex-lg-h .flex-grow-1,
+.flex-lg-v .flex-grow-1 {
+    flex-grow: 1;
+  }
+  .flex-lg-h .flex-shrink-1,
+.flex-lg-v .flex-shrink-1 {
+    flex-shrink: 1;
+  }
+  .flex-lg-h .flex-grow-2,
+.flex-lg-v .flex-grow-2 {
+    flex-grow: 2;
+  }
+  .flex-lg-h .flex-shrink-2,
+.flex-lg-v .flex-shrink-2 {
+    flex-shrink: 2;
+  }
+  .flex-lg-h .flex-grow-3,
+.flex-lg-v .flex-grow-3 {
+    flex-grow: 3;
+  }
+  .flex-lg-h .flex-shrink-3,
+.flex-lg-v .flex-shrink-3 {
+    flex-shrink: 3;
+  }
+  .flex-lg-h .flex-grow-4,
+.flex-lg-v .flex-grow-4 {
+    flex-grow: 4;
+  }
+  .flex-lg-h .flex-shrink-4,
+.flex-lg-v .flex-shrink-4 {
+    flex-shrink: 4;
+  }
+
+  /** raw css properties distribution */
+  .flex-lg-h.flex-wrap,
+.flex-lg-v.flex-wrap {
+    flex-wrap: wrap;
+  }
+  .flex-lg-h.flex-wrap-reverse,
+.flex-lg-v.flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+  .flex-lg-h .self-start,
+.flex-lg-v .self-start {
+    align-self: flex-start;
+  }
+  .flex-lg-h .self-end,
+.flex-lg-v .self-end {
+    align-self: flex-end;
+  }
+  .flex-lg-h .self-stretch,
+.flex-lg-v .self-stretch {
+    align-self: stretch;
+  }
+}
+@media only screen and (max-width: 48rem) {
+  .flex-md-h {
+    display: flex;
+    flex-direction: row;
+  }
+  .flex-md-h > .flex-main {
+    flex: 1 1 0;
+  }
+  .flex-md-h.align-middle, .flex-md-h.flex-align-middle {
+    align-items: center;
+  }
+  .flex-md-h.align-top, .flex-md-h.flex-align-top {
+    align-items: flex-start;
+  }
+  .flex-md-h.align-left, .flex-md-h.flex-align-left {
+    align-items: flex-start;
+  }
+  .flex-md-h.align-right, .flex-md-h.flex-align-right {
+    justify-content: flex-end;
+  }
+  .flex-md-h.align-bottom, .flex-md-h.flex-align-bottom {
+    align-items: flex-end;
+  }
+  .flex-md-h.align-center, .flex-md-h.flex-align-center {
+    justify-content: center;
+  }
+  .flex-md-h.align-middle-center, .flex-md-h.flex-align-middle-center {
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+  }
+  .flex-md-h.align-stretch, .flex-md-h.flex-align-stretch {
+    color: blue;
+    align-items: stretch;
+  }
+
+  .flex-md-v {
+    display: flex;
+    flex-direction: column;
+  }
+  .flex-md-v > .flex-main {
+    flex: 1 1 0;
+    max-height: 100%;
+  }
+  .flex-md-v.align-middle, .flex-md-v.flex-align-middle {
+    justify-content: center;
+  }
+  .flex-md-v.align-top, .flex-md-v.flex-align-top {
+    justify-content: flex-start;
+  }
+  .flex-md-v.align-left, .flex-md-v.flex-align-left {
+    align-items: flex-start;
+  }
+  .flex-md-v.align-right, .flex-md-v.flex-align-right {
+    align-items: flex-end;
+  }
+  .flex-md-v.align-bottom, .flex-md-v.flex-align-bottom {
+    justify-content: flex-end;
+  }
+  .flex-md-v.align-center, .flex-md-v.flex-align-center {
+    align-items: center;
+  }
+  .flex-md-v.align-middle-center, .flex-md-v.flex-align-middle-center {
+    align-items: center;
+    justify-content: center;
+  }
+  .flex-md-v.align-stretch, .flex-md-v.flex-align-stretch {
+    color: red;
+    align-items: stretch;
+  }
+
+  .flex-md-h,
+.flex-md-v {
+    box-sizing: border-box;
+  }
+  .flex-md-h > *,
+.flex-md-v > * {
+    box-sizing: border-box;
+  }
+  .flex-md-h > *:not(.flex-main),
+.flex-md-v > *:not(.flex-main) {
+    flex: 0 0 auto;
+  }
+  .flex-md-h.flex-inline,
+.flex-md-v.flex-inline {
+    display: inline-flex;
+  }
+  .flex-md-h .flex-grow-1,
+.flex-md-v .flex-grow-1 {
+    flex-grow: 1;
+  }
+  .flex-md-h .flex-shrink-1,
+.flex-md-v .flex-shrink-1 {
+    flex-shrink: 1;
+  }
+  .flex-md-h .flex-grow-2,
+.flex-md-v .flex-grow-2 {
+    flex-grow: 2;
+  }
+  .flex-md-h .flex-shrink-2,
+.flex-md-v .flex-shrink-2 {
+    flex-shrink: 2;
+  }
+  .flex-md-h .flex-grow-3,
+.flex-md-v .flex-grow-3 {
+    flex-grow: 3;
+  }
+  .flex-md-h .flex-shrink-3,
+.flex-md-v .flex-shrink-3 {
+    flex-shrink: 3;
+  }
+  .flex-md-h .flex-grow-4,
+.flex-md-v .flex-grow-4 {
+    flex-grow: 4;
+  }
+  .flex-md-h .flex-shrink-4,
+.flex-md-v .flex-shrink-4 {
+    flex-shrink: 4;
+  }
+
+  /** raw css properties distribution */
+  .flex-md-h.flex-wrap,
+.flex-md-v.flex-wrap {
+    flex-wrap: wrap;
+  }
+  .flex-md-h.flex-wrap-reverse,
+.flex-md-v.flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+  .flex-md-h .self-start,
+.flex-md-v .self-start {
+    align-self: flex-start;
+  }
+  .flex-md-h .self-end,
+.flex-md-v .self-end {
+    align-self: flex-end;
+  }
+  .flex-md-h .self-stretch,
+.flex-md-v .self-stretch {
+    align-self: stretch;
+  }
+}
+@media only screen and (max-width: 35.7rem) {
+  .flex-sm-h {
+    display: flex;
+    flex-direction: row;
+  }
+  .flex-sm-h > .flex-main {
+    flex: 1 1 0;
+  }
+  .flex-sm-h.align-middle, .flex-sm-h.flex-align-middle {
+    align-items: center;
+  }
+  .flex-sm-h.align-top, .flex-sm-h.flex-align-top {
+    align-items: flex-start;
+  }
+  .flex-sm-h.align-left, .flex-sm-h.flex-align-left {
+    align-items: flex-start;
+  }
+  .flex-sm-h.align-right, .flex-sm-h.flex-align-right {
+    justify-content: flex-end;
+  }
+  .flex-sm-h.align-bottom, .flex-sm-h.flex-align-bottom {
+    align-items: flex-end;
+  }
+  .flex-sm-h.align-center, .flex-sm-h.flex-align-center {
+    justify-content: center;
+  }
+  .flex-sm-h.align-middle-center, .flex-sm-h.flex-align-middle-center {
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+  }
+  .flex-sm-h.align-stretch, .flex-sm-h.flex-align-stretch {
+    color: blue;
+    align-items: stretch;
+  }
+
+  .flex-sm-v {
+    display: flex;
+    flex-direction: column;
+  }
+  .flex-sm-v > .flex-main {
+    flex: 1 1 0;
+    max-height: 100%;
+  }
+  .flex-sm-v.align-middle, .flex-sm-v.flex-align-middle {
+    justify-content: center;
+  }
+  .flex-sm-v.align-top, .flex-sm-v.flex-align-top {
+    justify-content: flex-start;
+  }
+  .flex-sm-v.align-left, .flex-sm-v.flex-align-left {
+    align-items: flex-start;
+  }
+  .flex-sm-v.align-right, .flex-sm-v.flex-align-right {
+    align-items: flex-end;
+  }
+  .flex-sm-v.align-bottom, .flex-sm-v.flex-align-bottom {
+    justify-content: flex-end;
+  }
+  .flex-sm-v.align-center, .flex-sm-v.flex-align-center {
+    align-items: center;
+  }
+  .flex-sm-v.align-middle-center, .flex-sm-v.flex-align-middle-center {
+    align-items: center;
+    justify-content: center;
+  }
+  .flex-sm-v.align-stretch, .flex-sm-v.flex-align-stretch {
+    color: red;
+    align-items: stretch;
+  }
+
+  .flex-sm-h,
+.flex-sm-v {
+    box-sizing: border-box;
+  }
+  .flex-sm-h > *,
+.flex-sm-v > * {
+    box-sizing: border-box;
+  }
+  .flex-sm-h > *:not(.flex-main),
+.flex-sm-v > *:not(.flex-main) {
+    flex: 0 0 auto;
+  }
+  .flex-sm-h.flex-inline,
+.flex-sm-v.flex-inline {
+    display: inline-flex;
+  }
+  .flex-sm-h .flex-grow-1,
+.flex-sm-v .flex-grow-1 {
+    flex-grow: 1;
+  }
+  .flex-sm-h .flex-shrink-1,
+.flex-sm-v .flex-shrink-1 {
+    flex-shrink: 1;
+  }
+  .flex-sm-h .flex-grow-2,
+.flex-sm-v .flex-grow-2 {
+    flex-grow: 2;
+  }
+  .flex-sm-h .flex-shrink-2,
+.flex-sm-v .flex-shrink-2 {
+    flex-shrink: 2;
+  }
+  .flex-sm-h .flex-grow-3,
+.flex-sm-v .flex-grow-3 {
+    flex-grow: 3;
+  }
+  .flex-sm-h .flex-shrink-3,
+.flex-sm-v .flex-shrink-3 {
+    flex-shrink: 3;
+  }
+  .flex-sm-h .flex-grow-4,
+.flex-sm-v .flex-grow-4 {
+    flex-grow: 4;
+  }
+  .flex-sm-h .flex-shrink-4,
+.flex-sm-v .flex-shrink-4 {
+    flex-shrink: 4;
+  }
+
+  /** raw css properties distribution */
+  .flex-sm-h.flex-wrap,
+.flex-sm-v.flex-wrap {
+    flex-wrap: wrap;
+  }
+  .flex-sm-h.flex-wrap-reverse,
+.flex-sm-v.flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+  .flex-sm-h .self-start,
+.flex-sm-v .self-start {
+    align-self: flex-start;
+  }
+  .flex-sm-h .self-end,
+.flex-sm-v .self-end {
+    align-self: flex-end;
+  }
+  .flex-sm-h .self-stretch,
+.flex-sm-v .self-stretch {
+    align-self: stretch;
+  }
+}