CSS flexbox framework

Here’s a simple CSS flexbox framework that I compiled for personal use

.flex {
    display: flex;
  }
  .flex-inline {
    display: inline-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-nowrap {
    flex-wrap: nowrap;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }
  .flex-row-nowrap {
    flex-flow: row nowrap;
  }
  .flex-row-wrap {
    flex-flow: row wrap;
  }
  .flex-row-wrap-reverse {
    flex-flow: row wrap-reverse;
  }
  .flex-column-nowrap {
    flex-flow: column nowrap;
  }
  .flex-column-wrap {
    flex-flow: column wrap;
  }
  .flex-column-wrap-reverse {
    flex-flow: column wrap-reverse;
  }
  .flex-row-reverse-nowrap {
    flex-flow: row-reverse nowrap;
  }
  .flex-row-reverse-wrap {
    flex-flow: row-reverse wrap;
  }
  .flex-row-reverse-wrap-reverse {
    flex-flow: row-reverse wrap-reverse;
  }
  .flex-column-reverse-nowrap {
    flex-flow: column-reverse nowrap;
  }
  .flex-column-reverse-wrap {
    flex-flow: column-reverse wrap;
  }
  .flex-column-reverse-wrap-reverse {
    flex-flow: column-reverse wrap-reverse;
  }
  .justify-flex-start {
    justify-content: flex-start;
  }
  .justify-flex-end {
    justify-content: flex-end;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-space-between {
    justify-content: space-between;
  }
  .justify-space-around {
    justify-content: space-around;
  }
  .justify-space-evenly {
    justify-content: space-evenly;
  }
  .flex-order-1 {
    order: 1;
  }
  .flex-order-2 {
    order: 2;
  }
  .flex-order-3 {
    order: 3;
  }
  .flex-order-4 {
    order: 4;
  }
  .flex-order-5 {
    order: 5;
  }
  .flex-order-6 {
    order: 6;
  }
  .flex-order-7 {
    order: 7;
  }
  .flex-order-8 {
    order: 8;
  }
  .flex-order-9 {
    order: 9;
  }
  .flex-order-10 {
    order: 10;
  }
  .flex-0 {
    flex: 0;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-2 {
    flex: 2;
  }
  .flex-3 {
    flex: 3;
  }
  .flex-4 {
    flex: 4;
  }
  .flex-5 {
    flex: 5;
  }
  .flex-6 {
    flex: 6;
  }
  .flex-7 {
    flex: 7;
  }
  .flex-8 {
    flex: 8;
  }
  .flex-9 {
    flex: 9;
  }
  .flex-10 {
    flex: 10;
  }
  .flex-grow-0 {
    flex-grow: 0;
  }
  .flex-grow-1 {
    flex-grow: 1;
  }
  .flex-grow-2 {
    flex-grow: 2;
  }
  .flex-grow-3 {
    flex-grow: 3;
  }
  .flex-grow-4 {
    flex-grow: 4;
  }
  .flex-grow-5 {
    flex-grow: 5;
  }
  .flex-grow-6 {
    flex-grow: 6;
  }
  .flex-grow-7 {
    flex-grow: 7;
  }
  .flex-grow-8 {
    flex-grow: 8;
  }
  .flex-grow-9 {
    flex-grow: 9;
  }
  .flex-grow-10 {
    flex-grow: 10;
  }
  .flex-shrink-0 {
    flex-shrink: 0;
  }
  .flex-shrink-1 {
    flex-shrink: 1;
  }
  .flex-shrink-2 {
    flex-shrink: 2;
  }
  .flex-shrink-3 {
    flex-shrink: 3;
  }
  .flex-shrink-4 {
    flex-shrink: 4;
  }
  .flex-shrink-5 {
    flex-shrink: 5;
  }
  .flex-shrink-6 {
    flex-shrink: 6;
  }
  .flex-shrink-7 {
    flex-shrink: 7;
  }
  .flex-shrink-8 {
    flex-shrink: 8;
  }
  .flex-shrink-9 {
    flex-shrink: 9;
  }
  .flex-shrink-10 {
    flex-shrink: 10;
  }
  .self-auto {
    align-self: auto;
  }
  .self-flex-start {
    align-self: flex-start;
  }
  .self-flex-end {
    align-self: flex-end;
  }
  .self-center {
    align-self: center;
  }
  .self-baseline {
    align-self: baseline;
  }
  .self-stretch {
    align-self: stretch;
  }
  .container-flex-start {
    align-items: flex-start;
  }
  .container-flex-end {
    align-items: flex-end;
  }
  .container-center {
    align-items: center;
  }
  .container-baseline {
    align-items: baseline;
  }
  .container-stretch {
    align-items: stretch;
  }
  .content-flex-start {
    align-content: flex-start;
  }
  .content-flex-end {
    align-content: flex-end;
  }
  .content-center {
    align-content: center;
  }
  .content-baseline {
    align-content: baseline;
  }
  .content-stretch {
    align-content: stretch;
}

Usage:

ClassDeclarationUsage
flexdisplay: flex;flex
flex-inlinedisplay: inline-flex;flex-inline
flex-$directionflex-direction: $direction;
  • flex-row
  • flex-column
  • flex-row-reverse
  • flex-column-reverse
flex-$wrapflex-wrap: $wrap;
  • flex-nowrap
  • flex-wrap
  • flex-wrap-reverse
flex-$direction-$wrapflex-flow: $direction $wrap;
  • flex-row-nowrap
  • flex-row-wrap
  • flex-row-wrap-reverse
  • flex-column-nowrap
  • flex-column-wrap
  • flex-column-wrap-reverse
  • flex-row-reverse-nowrap
  • flex-row-reverse-wrap
  • flex-row-reverse-wrap-reverse
  • flex-column-reverse-nowrap
  • flex-column-reverse-wrap
  • flex-column-reverse-wrap-reverse
justify-$alignmentjustify-content: $alignment;
  • justify-flex-start
  • justify-flex-end
  • justify-center
  • justify-space-between
  • justify-space-around
  • justify-space-evenly
flex-order-$valueorder: $value;flex-order-1 to flex-order-10
flex-$valueflex: $value;flex-0 to flex-10
flex-grow-$valueflex-grow: $value;flex-grow-0 to flex-grow-10
flex-shrink-$valueflex-shrink: $value;flex-shrink-0 to flex-shrink-10
self-$alignmentalign-self: $alignment;
  • self-auto
  • self-flex-start
  • self-flex-end
  • self-center
  • self-baseline
  • self-stretch
container-$alignmentalign-items: $alignment;
  • container-flex-start
  • container-flex-end
  • container-center
  • container-baseline
  • container-stretch
content-$alignmentalign-content: $alignment;
  • content-flex-start
  • content-flex-end
  • content-center
  • content-space-between
  • content-space-around
  • content-stretch
All the values prefixed with $ symbol denotes a variable. Variable values are provided in the example section

Report (Please include link to post while reporting)

Leave a Reply

Your email address will not be published. Required fields are marked *