@c8y/style/styles/utilities/_flex-containers.less

Styles for Cumulocity IoT applications

// Flex wrap
.flex-wrap {
  flex-wrap: wrap !important;
}
.flex-nowrap {
  flex-wrap: nowrap !important;
}

// justify-content
.j-c-start {
  justify-content: flex-start !important;
}
.j-c-center {
  justify-content: center !important;
}
.j-c-end {
  justify-content: flex-end !important;
}
.j-c-around {
  justify-content: space-around !important;
}
.j-c-between {
  justify-content: space-between !important;
}
.j-c-evenly {
  justify-content: space-evenly !important;
}

// align-items
.a-i-start {
  align-items: flex-start !important;
}
.a-i-center {
  align-items: center !important;
}
.a-i-end {
  align-items: flex-end !important;
}
.a-i-stretch {
  align-items: stretch !important;
}
.a-i-baseline {
  align-items: baseline !important;
}

@media (max-width: @screen-xs-max) {
  .flex-wrap-xs {
    flex-wrap: wrap !important;
  }
  .flex-nowrap-xs {
    flex-wrap: nowrap !important;
  }

  .j-c-start-xs {
    justify-content: flex-start !important;
  }
  .j-c-center-xs {
    justify-content: center !important;
  }
  .j-c-end-xs {
    justify-content: flex-end !important;
  }
  .j-c-around-xs {
    justify-content: space-around !important;
  }
  .j-c-between-xs {
    justify-content: space-between !important;
  }
  .j-c-evenly-xs {
    justify-content: space-evenly !important;
  }

  .a-i-start-xs {
    align-items: flex-start !important;
  }
  .a-i-center-xs {
    align-items: center !important;
  }
  .a-i-end-xs {
    align-items: flex-end !important;
  }
  .a-i-stretch-xs {
    align-items: stretch !important;
  }
}

@media (min-width: @screen-sm-min) {
  .flex-wrap-sm {
    flex-wrap: wrap !important;
  }
  .flex-nowrap-sm {
    flex-wrap: nowrap !important;
  }

  .j-c-start-sm {
    justify-content: flex-start !important;
  }
  .j-c-center-sm {
    justify-content: center !important;
  }
  .j-c-end-sm {
    justify-content: flex-end !important;
  }
  .j-c-around-sm {
    justify-content: space-around !important;
  }
  .j-c-between-sm {
    justify-content: space-between !important;
  }
  .j-c-evenly-sm {
    justify-content: space-evenly !important;
  }

  .a-i-start-sm {
    align-items: flex-start !important;
  }
  .a-i-center-sm {
    align-items: center !important;
  }
  .a-i-end-sm {
    align-items: flex-end !important;
  }
  .a-i-stretch-sm {
    align-items: stretch !important;
  }
}

@media (min-width: @screen-md-min) {
  .flex-wrap-md {
    flex-wrap: wrap !important;
  }
  .flex-nowrap-md {
    flex-wrap: nowrap !important;
  }

  .j-c-start-md {
    justify-content: flex-start !important;
  }
  .j-c-center-md {
    justify-content: center !important;
  }
  .j-c-end-md {
    justify-content: flex-end !important;
  }
  .j-c-around-md {
    justify-content: space-around !important;
  }
  .j-c-between-md {
    justify-content: space-between !important;
  }
  .j-c-evenly-md {
    justify-content: space-evenly !important;
  }

  .a-i-start-md {
    align-items: flex-start !important;
  }
  .a-i-center-md {
    align-items: center !important;
  }
  .a-i-end-md {
    align-items: flex-end !important;
  }
  .a-i-stretch-md {
    align-items: stretch !important;
  }
}

@media (min-width: @screen-lg-min) {
  .flex-wrap-lg {
    flex-wrap: wrap !important;
  }
  .flex-nowrap-lg {
    flex-wrap: nowrap !important;
  }

  .j-c-start-lg {
    justify-content: flex-start !important;
  }
  .j-c-center-lg {
    justify-content: center !important;
  }
  .j-c-end-lg {
    justify-content: flex-end !important;
  }
  .j-c-around-lg {
    justify-content: space-around !important;
  }
  .j-c-between-lg {
    justify-content: space-between !important;
  }
  .j-c-evenly-lg {
    justify-content: space-evenly !important;
  }

  .a-i-start-lg {
    align-items: flex-start !important;
  }
  .a-i-center-lg {
    align-items: center !important;
  }
  .a-i-end-lg {
    align-items: flex-end !important;
  }
  .a-i-stretch-lg {
    align-items: stretch !important;
  }
}