style-forge.helpers/src/flex.css

Style-Forge.Helpers: essential CSS helper classes for spacing, alignment, visibility, and more in web development.

[hidden], datalist, dialog:not([open]), source, template, track { display: none !important }

.d\:f, .d\:f\:x, .d\:f\:y { display: flex; flex-wrap: wrap }

.d\:f\:x { flex-direction: row }
.d\:f\:y { flex-direction: column }

.reverse, .reverse.d\:f\:x, .reverse.d\:f\:y { flex-wrap: wrap-reverse }
.reverse { flex-direction: row-reverse }
.reverse\:x, .reverse.d\:f\:x { flex-direction: row-reverse }
.reverse\:y, .reverse.d\:f\:y { flex-direction: column-reverse }
.reverse\:wrap { flex-wrap: wrap-reverse }

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

.grow\:i, .\$grow\:i > * { flex-grow: inherit }
.grow\:ii, .\$grow\:ii > * { flex-grow: initial }
.grow\:0, .\$grow\:0 > * { flex-grow: 0 }
.grow\:1, .\$grow\:1 > * { flex-grow: 1 }
.grow\:2, .\$grow\:2 > * { flex-grow: 2 }
.grow\:3, .\$grow\:3 > * { flex-grow: 3 }
.grow\:4, .\$grow\:4 > * { flex-grow: 4 }
.grow\:5, .\$grow\:5 > * { flex-grow: 5 }

.shrink\:i, .\$shrink\:i > * { flex-shrink: inherit }
.shrink\:ii, .\$shrink\:ii > * { flex-shrink: initial }
.shrink\:0, .\$shrink\:0 > * { flex-shrink: 0 }
.shrink\:1, .\$shrink\:1 > * { flex-shrink: 1 }
.shrink\:2, .\$shrink\:2 > * { flex-shrink: 2 }
.shrink\:3, .\$shrink\:3 > * { flex-shrink: 3 }
.shrink\:4, .\$shrink\:4 > * { flex-shrink: 4 }
.shrink\:5, .\$shrink\:5 > * { flex-shrink: 5 }

.basis\:i, .\$basis\:i > * { flex-basis: inherit }
.basis\:ii, .\$basis\:ii > * { flex-basis: initial }
.basis\:0, .\$basis\:0 > * { flex-basis: 0 }
.basis\:10, .\$basis\:10 > * { flex-basis: 10% }
.basis\:20, .\$basis\:20 > * { flex-basis: 20% }
.basis\:25, .\$basis\:25 > * { flex-basis: 25% }
.basis\:33, .\$basis\:33 > * { flex-basis: 33.3333% }
.basis\:50, .\$basis\:50 > * { flex-basis: 50% }
.basis\:100, .\$basis\:100 > * { flex-basis: 100% }
.basis\:auto, .\$basis\:auto > * { flex-basis: auto }
.basis\:available, .\$basis\:available > * { flex-basis: available }
.basis\:bb, .\$basis\:bb > * { flex-basis: border-box }
.basis\:cb, .\$basis\:cb > * { flex-basis: content-box }
.basis\:c, .\$basis\:c > * { flex-basis: content }
.basis\:fc, .\$basis\:fc > * { flex-basis: fit-content }
.basis\:max, .\$basis\:max > * { flex-basis: max-content }
.basis\:min, .\$basis\:min > * { flex-basis: min-content }

/* /// */

html.grid .d\:f, html.grid .d\:f\:x, html.grid .d\:f\:y { display: flex }

html.flex .d\:f, html.flex .d\:f\:x, html.flex .d\:f\:y { display: block; letter-spacing: -1em !important }
html.flex .d\:f > *, html.flex .d\:f\:x > *, html.flex .d\:f\:y > * { letter-spacing: normal; vertical-align: top }
html.flex .d\:f > *, html.flex .d\:f\:x > * { display: inline-block }
html.flex .d\:f\:y > * { display: block }

html.flex .d\:f > .d\:f, html.flex .d\:f > .d\:f\:x, html.flex .d\:f > .d\:f\:y,
html.flex .d\:g > .d\:f, html.flex .d\:g > .d\:f\:x, html.flex .d\:g > .d\:f\:y,
html.flex .d\:f\:x > .d\:f, html.flex .d\:f\:x > .d\:f\:x, html.flex .d\:f\:x > .d\:f\:y,
html.flex .d\:g\:x > .d\:f, html.flex .d\:g\:x > .d\:f\:x, html.flex .d\:g\:x > .d\:f\:y
{ display: inline-block }