.flex(@media) { display: flex; &.row-@{media} { flex-direction: row; } &.row-@{media}-inv { flex-direction: row-reverse; } &.col-@{media} { flex-direction: column; } &.col-@{media}-inv { flex-direction: column-reverse; } @main-axis-align: { start: flex-start; center: center; end: flex-end; space: space-around; even: space-evenly; between: space-between; baseline: baseline; } each(@main-axis-align, { &.rm-@{key}-@{media} { justify-content: @value; } &.cm-@{key}-@{media} { align-content: @value; } }); @cross-axis-align: { start: flex-start; center: center; end: flex-end; stretch: stretch; baseline: baseline; } each(@cross-axis-align, { &.rc-@{key}-@{media} { align-items: @value; } .as-@{key}-@{media} { align-self: @value; } }); each(range(1, 10), .(@i) { .extend-@{i}-@{media} { flex-grow: @i; } .shrink-@{i}-@{media} { flex-shrink: @i; } }); @special-width: { min: min-content; max: max-content; fit: fit-content; }; each(@special-width, { .w-@{key}-@{media} { width: @value; } }); @basis-percent: 2, 3, 4, 5, 8, 10, 12, 16, 20, 24; each(@basis-percent, .(@max) { each(range(1, @max), .(@i) { .b-@{i}-@{max}-@{media} { flex-basis: percentage(@i / @max); } .w-@{i}-@{max}-@{media} { width: percentage(@i / @max); } }); }); @wrap-modes: { none: nowrap; wrap: wrap; inv: wrap-reverse; } each(@wrap-modes, { &.w-@{key}-@{media} { flex-wrap: @value; } }) } .text-align(@media) { @align: { l: left; c: center; r: right; } each(@align, { &.align-@{key}-@{media} { text-align: @value; } }) }