.flex {
    display: flex;
}

/* flex direction */
.flex.flex--direction-r {
    flex-direction: row;
}

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

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

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

/* flex direction //end */

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

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

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

/* flex wrap //end */

/* flex justify-content */
.flex.flex--jc-c {
    justify-content: center;
}

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

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

.flex.flex--jc-l {
    justify-content: left;
}

.flex.flex--jc-r {
    justify-content: right;
}

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

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

.flex.flex--jc-str {
    justify-content: stretch;
}

.flex.flex--jc-spb {
    justify-content: space-between;
}

.flex.flex--jc-spa {
    justify-content: space-around;
}

.flex.flex--jc-spe {
    justify-content: space-evenly;
}

/* flex justify-content //end */

/* flex justify-items */
.flex.flex--ji-str {
    justify-items: stretch;
}

.flex.flex--ji-c {
    justify-items: center;
}

.flex.flex--ji-s {
    justify-items: start;
}

.flex.flex--ji-e {
    justify-items: end;
}

/* flex justify-items //end */

/* flex justify-self */
.flex.flex--js-str {
    justify-self: stretch;
}

.flex.flex--js-c {
    justify-self: center;
}

.flex.flex--js-s {
    justify-self: start;
}

.flex.flex--js-e {
    justify-self: end;
}

/* flex justify-self //end */

/* flex align items */
.flex.flex--ai-str {
    align-items: stretch;
}

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

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

.flex.flex--ai-c {
    align-items: center;
}

.flex.flex--ai-bl {
    align-items: baseline;
}

/* flex align items */

/* flex align content */
.flex.flex--ac-c {
    align-content: center;
}

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

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

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

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

.flex.flex--ac-bl {
    align-content: baseline;
}

.flex.flex--ac-spb {
    align-content: space-between;
}

.flex.flex--ac-spa {
    align-content: space-around;
}

.flex.flex--ac-spe {
    align-content: space-evenly;
}

.flex.flex--ac-str {
    align-content: stretch;
}

/* flex align content //end */

/* flex align self */
.flex.flex--as-str {
    align-self: stretch;
}

.flex.flex--as-c {
    align-self: center;
}

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

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

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

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

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

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

/* flex align self //end */