@novicell/css-utils/dist/src/flex.css

A CSS utility class package inspired by Bootstrap 4 CSS utilities and configurable via CSS Custom Properties and PostCSS.

/*
// Flex
*/

.flex-row { flex-direction: row; }

.flex-column { flex-direction: column; }

.flex-row-reverse { flex-direction: row-reverse; }

.flex-column-reverse { flex-direction: column-reverse; }

.flex-wrap { flex-wrap: wrap; }

.flex-nowrap { flex-wrap: nowrap; }

.flex-wrap-reverse { flex-wrap: wrap-reverse; }

.flex-fill { flex: 1 1 auto; }

.flex-grow-0 { flex-grow: 0; }

.flex-grow-1 { flex-grow: 1; }

.flex-shrink-0 { flex-shrink: 0; }

.flex-shrink-1 { flex-shrink: 1; }

.justify-content-start { justify-content: flex-start; }

.justify-content-end { justify-content: flex-end; }

.justify-content-center { justify-content: center; }

.justify-content-between { justify-content: space-between; }

.justify-content-around { justify-content: space-around; }

.justify-content-evenly { justify-content: space-evenly; }

.align-items-start { align-items: flex-start; }

.align-items-end { align-items: flex-end; }

.align-items-center { align-items: center; }

.align-items-baseline { align-items: baseline; }

.align-items-stretch { align-items: stretch; }

.align-content-start { align-content: flex-start; }

.align-content-end { align-content: flex-end; }

.align-content-center { align-content: center; }

.align-content-between { align-content: space-between; }

.align-content-around { align-content: space-around; }

.align-content-evenly { align-content: space-evenly; }

.align-content-stretch { align-content: stretch; }

.align-self-auto { align-self: auto; }

.align-self-start { align-self: flex-start; }

.align-self-end { align-self: flex-end; }

.align-self-center { align-self: center; }

.align-self-baseline { align-self: baseline; }

.align-self-stretch { align-self: stretch; }


/* Repsonsive */
@media (--viewport-ms-min) {
    .flex-ms-row { flex-direction: row; }

    .flex-ms-column { flex-direction: column; }

    .flex-ms-row-reverse { flex-direction: row-reverse; }

    .flex-ms-column-reverse { flex-direction: column-reverse; }

    .flex-ms-wrap { flex-wrap: wrap; }

    .flex-ms-nowrap { flex-wrap: nowrap; }

    .flex-ms-wrap-reverse { flex-wrap: wrap-reverse; }

    .flex-ms-fill { flex: 1 1 auto; }

    .flex-ms-grow-0 { flex-grow: 0; }

    .flex-ms-grow-1 { flex-grow: 1; }

    .flex-ms-shrink-0 { flex-shrink: 0; }

    .flex-ms-shrink-1 { flex-shrink: 1; }

    .justify-content-ms-start { justify-content: flex-start; }

    .justify-content-ms-end { justify-content: flex-end; }

    .justify-content-ms-center { justify-content: center; }

    .justify-content-ms-between { justify-content: space-between; }

    .justify-content-ms-around { justify-content: space-around; }

    .justify-content-ms-evenly { justify-content: space-evenly; }

    .align-items-ms-start { align-items: flex-start; }

    .align-items-ms-end { align-items: flex-end; }

    .align-items-ms-center { align-items: center; }

    .align-items-ms-baseline { align-items: baseline; }

    .align-items-ms-stretch { align-items: stretch; }

    .align-content-ms-start { align-content: flex-start; }

    .align-content-ms-end { align-content: flex-end; }

    .align-content-ms-center { align-content: center; }

    .align-content-ms-between { align-content: space-between; }

    .align-content-ms-around { align-content: space-around; }

    .align-content-ms-evenly { align-content: space-evenly; }

    .align-content-ms-stretch { align-content: stretch; }

    .align-self-ms-auto { align-self: auto; }

    .align-self-ms-start { align-self: flex-start; }

    .align-self-ms-end { align-self: flex-end; }

    .align-self-ms-center { align-self: center; }

    .align-self-ms-baseline { align-self: baseline; }

    .align-self-ms-stretch { align-self: stretch; }
  }
@media (--viewport-sm-min) {
    .flex-sm-row { flex-direction: row; }

    .flex-sm-column { flex-direction: column; }

    .flex-sm-row-reverse { flex-direction: row-reverse; }

    .flex-sm-column-reverse { flex-direction: column-reverse; }

    .flex-sm-wrap { flex-wrap: wrap; }

    .flex-sm-nowrap { flex-wrap: nowrap; }

    .flex-sm-wrap-reverse { flex-wrap: wrap-reverse; }

    .flex-sm-fill { flex: 1 1 auto; }

    .flex-sm-grow-0 { flex-grow: 0; }

    .flex-sm-grow-1 { flex-grow: 1; }

    .flex-sm-shrink-0 { flex-shrink: 0; }

    .flex-sm-shrink-1 { flex-shrink: 1; }

    .justify-content-sm-start { justify-content: flex-start; }

    .justify-content-sm-end { justify-content: flex-end; }

    .justify-content-sm-center { justify-content: center; }

    .justify-content-sm-between { justify-content: space-between; }

    .justify-content-sm-around { justify-content: space-around; }

    .justify-content-sm-evenly { justify-content: space-evenly; }

    .align-items-sm-start { align-items: flex-start; }

    .align-items-sm-end { align-items: flex-end; }

    .align-items-sm-center { align-items: center; }

    .align-items-sm-baseline { align-items: baseline; }

    .align-items-sm-stretch { align-items: stretch; }

    .align-content-sm-start { align-content: flex-start; }

    .align-content-sm-end { align-content: flex-end; }

    .align-content-sm-center { align-content: center; }

    .align-content-sm-between { align-content: space-between; }

    .align-content-sm-around { align-content: space-around; }

    .align-content-sm-evenly { align-content: space-evenly; }

    .align-content-sm-stretch { align-content: stretch; }

    .align-self-sm-auto { align-self: auto; }

    .align-self-sm-start { align-self: flex-start; }

    .align-self-sm-end { align-self: flex-end; }

    .align-self-sm-center { align-self: center; }

    .align-self-sm-baseline { align-self: baseline; }

    .align-self-sm-stretch { align-self: stretch; }
  }
@media (--viewport-md-min) {
    .flex-md-row { flex-direction: row; }

    .flex-md-column { flex-direction: column; }

    .flex-md-row-reverse { flex-direction: row-reverse; }

    .flex-md-column-reverse { flex-direction: column-reverse; }

    .flex-md-wrap { flex-wrap: wrap; }

    .flex-md-nowrap { flex-wrap: nowrap; }

    .flex-md-wrap-reverse { flex-wrap: wrap-reverse; }

    .flex-md-fill { flex: 1 1 auto; }

    .flex-md-grow-0 { flex-grow: 0; }

    .flex-md-grow-1 { flex-grow: 1; }

    .flex-md-shrink-0 { flex-shrink: 0; }

    .flex-md-shrink-1 { flex-shrink: 1; }

    .justify-content-md-start { justify-content: flex-start; }

    .justify-content-md-end { justify-content: flex-end; }

    .justify-content-md-center { justify-content: center; }

    .justify-content-md-between { justify-content: space-between; }

    .justify-content-md-around { justify-content: space-around; }

    .justify-content-md-evenly { justify-content: space-evenly; }

    .align-items-md-start { align-items: flex-start; }

    .align-items-md-end { align-items: flex-end; }

    .align-items-md-center { align-items: center; }

    .align-items-md-baseline { align-items: baseline; }

    .align-items-md-stretch { align-items: stretch; }

    .align-content-md-start { align-content: flex-start; }

    .align-content-md-end { align-content: flex-end; }

    .align-content-md-center { align-content: center; }

    .align-content-md-between { align-content: space-between; }

    .align-content-md-around { align-content: space-around; }

    .align-content-md-evenly { align-content: space-evenly; }

    .align-content-md-stretch { align-content: stretch; }

    .align-self-md-auto { align-self: auto; }

    .align-self-md-start { align-self: flex-start; }

    .align-self-md-end { align-self: flex-end; }

    .align-self-md-center { align-self: center; }

    .align-self-md-baseline { align-self: baseline; }

    .align-self-md-stretch { align-self: stretch; }
  }
@media (--viewport-lg-min) {
    .flex-lg-row { flex-direction: row; }

    .flex-lg-column { flex-direction: column; }

    .flex-lg-row-reverse { flex-direction: row-reverse; }

    .flex-lg-column-reverse { flex-direction: column-reverse; }

    .flex-lg-wrap { flex-wrap: wrap; }

    .flex-lg-nowrap { flex-wrap: nowrap; }

    .flex-lg-wrap-reverse { flex-wrap: wrap-reverse; }

    .flex-lg-fill { flex: 1 1 auto; }

    .flex-lg-grow-0 { flex-grow: 0; }

    .flex-lg-grow-1 { flex-grow: 1; }

    .flex-lg-shrink-0 { flex-shrink: 0; }

    .flex-lg-shrink-1 { flex-shrink: 1; }

    .justify-content-lg-start { justify-content: flex-start; }

    .justify-content-lg-end { justify-content: flex-end; }

    .justify-content-lg-center { justify-content: center; }

    .justify-content-lg-between { justify-content: space-between; }

    .justify-content-lg-around { justify-content: space-around; }

    .justify-content-lg-evenly { justify-content: space-evenly; }

    .align-items-lg-start { align-items: flex-start; }

    .align-items-lg-end { align-items: flex-end; }

    .align-items-lg-center { align-items: center; }

    .align-items-lg-baseline { align-items: baseline; }

    .align-items-lg-stretch { align-items: stretch; }

    .align-content-lg-start { align-content: flex-start; }

    .align-content-lg-end { align-content: flex-end; }

    .align-content-lg-center { align-content: center; }

    .align-content-lg-between { align-content: space-between; }

    .align-content-lg-around { align-content: space-around; }

    .align-content-lg-evenly { align-content: space-evenly; }

    .align-content-lg-stretch { align-content: stretch; }

    .align-self-lg-auto { align-self: auto; }

    .align-self-lg-start { align-self: flex-start; }

    .align-self-lg-end { align-self: flex-end; }

    .align-self-lg-center { align-self: center; }

    .align-self-lg-baseline { align-self: baseline; }

    .align-self-lg-stretch { align-self: stretch; }
  }
@media (--viewport-xl-min) {
    .flex-xl-row { flex-direction: row; }

    .flex-xl-column { flex-direction: column; }

    .flex-xl-row-reverse { flex-direction: row-reverse; }

    .flex-xl-column-reverse { flex-direction: column-reverse; }

    .flex-xl-wrap { flex-wrap: wrap; }

    .flex-xl-nowrap { flex-wrap: nowrap; }

    .flex-xl-wrap-reverse { flex-wrap: wrap-reverse; }

    .flex-xl-fill { flex: 1 1 auto; }

    .flex-xl-grow-0 { flex-grow: 0; }

    .flex-xl-grow-1 { flex-grow: 1; }

    .flex-xl-shrink-0 { flex-shrink: 0; }

    .flex-xl-shrink-1 { flex-shrink: 1; }

    .justify-content-xl-start { justify-content: flex-start; }

    .justify-content-xl-end { justify-content: flex-end; }

    .justify-content-xl-center { justify-content: center; }

    .justify-content-xl-between { justify-content: space-between; }

    .justify-content-xl-around { justify-content: space-around; }

    .justify-content-xl-evenly { justify-content: space-evenly; }

    .align-items-xl-start { align-items: flex-start; }

    .align-items-xl-end { align-items: flex-end; }

    .align-items-xl-center { align-items: center; }

    .align-items-xl-baseline { align-items: baseline; }

    .align-items-xl-stretch { align-items: stretch; }

    .align-content-xl-start { align-content: flex-start; }

    .align-content-xl-end { align-content: flex-end; }

    .align-content-xl-center { align-content: center; }

    .align-content-xl-between { align-content: space-between; }

    .align-content-xl-around { align-content: space-around; }

    .align-content-xl-evenly { align-content: space-evenly; }

    .align-content-xl-stretch { align-content: stretch; }

    .align-self-xl-auto { align-self: auto; }

    .align-self-xl-start { align-self: flex-start; }

    .align-self-xl-end { align-self: flex-end; }

    .align-self-xl-center { align-self: center; }

    .align-self-xl-baseline { align-self: baseline; }

    .align-self-xl-stretch { align-self: stretch; }
  }

/* Order */
.order-first { order: -1; }

.order-last { order: 13; }

/* Repsonsive */
@media (--viewport-ms-min) {
      .order-ms-2 { order: 2; }
      .order-ms-3 { order: 3; }
      .order-ms-4 { order: 4; }
      .order-ms-5 { order: 5; }
      .order-ms-6 { order: 6; }
      .order-ms-7 { order: 7; }
      .order-ms-8 { order: 8; }
      .order-ms-9 { order: 9; }
      .order-ms-10 { order: 10; }
      .order-ms-11 { order: 11; }
      .order-ms-12 { order: 12; }
  }
@media (--viewport-sm-min) {
      .order-sm-2 { order: 2; }
      .order-sm-3 { order: 3; }
      .order-sm-4 { order: 4; }
      .order-sm-5 { order: 5; }
      .order-sm-6 { order: 6; }
      .order-sm-7 { order: 7; }
      .order-sm-8 { order: 8; }
      .order-sm-9 { order: 9; }
      .order-sm-10 { order: 10; }
      .order-sm-11 { order: 11; }
      .order-sm-12 { order: 12; }
  }
@media (--viewport-md-min) {
      .order-md-2 { order: 2; }
      .order-md-3 { order: 3; }
      .order-md-4 { order: 4; }
      .order-md-5 { order: 5; }
      .order-md-6 { order: 6; }
      .order-md-7 { order: 7; }
      .order-md-8 { order: 8; }
      .order-md-9 { order: 9; }
      .order-md-10 { order: 10; }
      .order-md-11 { order: 11; }
      .order-md-12 { order: 12; }
  }
@media (--viewport-lg-min) {
      .order-lg-2 { order: 2; }
      .order-lg-3 { order: 3; }
      .order-lg-4 { order: 4; }
      .order-lg-5 { order: 5; }
      .order-lg-6 { order: 6; }
      .order-lg-7 { order: 7; }
      .order-lg-8 { order: 8; }
      .order-lg-9 { order: 9; }
      .order-lg-10 { order: 10; }
      .order-lg-11 { order: 11; }
      .order-lg-12 { order: 12; }
  }
@media (--viewport-xl-min) {
      .order-xl-2 { order: 2; }
      .order-xl-3 { order: 3; }
      .order-xl-4 { order: 4; }
      .order-xl-5 { order: 5; }
      .order-xl-6 { order: 6; }
      .order-xl-7 { order: 7; }
      .order-xl-8 { order: 8; }
      .order-xl-9 { order: 9; }
      .order-xl-10 { order: 10; }
      .order-xl-11 { order: 11; }
      .order-xl-12 { order: 12; }
  }