quasar-framework/src/css/core/flex.styl

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

.row, .column, .flex
  display flex
  flex-wrap wrap
  &.inline
    display inline-flex

.row.reverse
  flex-direction row-reverse

.column
  flex-direction column
  &.reverse
    flex-direction column-reverse

.wrap
  flex-wrap wrap
.no-wrap
  flex-wrap nowrap
.reverse-wrap
  flex-wrap wrap-reverse

.col
  flex-basis 0
  flex-grow 1
  min-height 1px
  min-width 0

.row
  > .col
    max-width 100%
    width 100%

for $name, $size in $sizes
  .row > .col-{$name}
    width 100%
  .col-{$name}
    min-height 1px
  for $i in (1..$flex-cols)
    .row > .col-{$name}-{$i}
      width 100%
    .col-{$name}-{$i}
      min-height 1px

.row > .col-auto
  width auto
.col-auto
  flex 0 0 auto
  min-width 0
.col-grow
  flex 1 1 auto

.order-first
  order -10000
.order-last
  order 10000
.order-none
  order 0

.justify-
  &start
    justify-content flex-start
  &end
    justify-content flex-end
  &center
    justify-content center
  &between
    justify-content space-between
  &around
    justify-content space-around

.items-
  &start
    align-items flex-start
  &end
    align-items flex-end
  &center
    align-items center
  &baseline
    align-items baseline
  &stretch
    align-items stretch

.content-
  &start
    align-content flex-start
  &end
    align-content flex-end
  &center
    align-content center
  &stretch
    align-content stretch
  &between
    align-content space-between
  &around
    align-content space-around

.self-
  &start
    align-self flex-start
  &end
    align-self flex-end
  &center
    align-self center
  &baseline
    align-self baseline
  &stretch
    align-self stretch

.flex-center
  @extend .items-center
  @extend .justify-center

for $i in (1..$flex-cols)
  .col-{$i}
    flex 0 0 (round($i / $flex-cols * 100, 4))%
  .row > .col-{$i}
    max-width (round($i / $flex-cols * 100, 4))%
  .offset-{$i}
    margin-left (round($i / $flex-cols * 100, 4))%

for $name, $size in $flex-gutter
  .gutter-{$name}
    margin (- $size) 0 0 (- $size)
    > div
      padding $size 0 0 $size
  .gutter-x-{$name}
    margin-left (- $size)
    > div
      padding-left $size
  .gutter-y-{$name}
    margin-top (- $size)
    > div
      padding-top $size

for $name, $size in $sizes
  @media (min-width $size)
    .col-{$name}
      max-width 100%
      flex-basis 0
      flex-grow 1
    .col-{$name}-auto
      flex 0 0 auto
      .row > &
        width auto

    for $i in (1..$flex-cols)
      .col-{$name}-{$i}
        flex 0 0 (round($i / $flex-cols * 100, 4))%
      .row > .col-{$name}-{$i}
        max-width (round($i / $flex-cols * 100, 4))%
      .offset-{$name}-{$i}
        margin-left (round($i / $flex-cols * 100, 4))%