Flex mixins

Flexbox layout system for creating flexible page layouts.

Gap utilities are defined in _spacing.scss.

<div class="flex row between x-center">
  <div class="fill-6">Left column (6 of 12 columns)</div>
  <div class="fill-6">Right column (6 of 12 columns)</div>
</div>

<div class="flex col@md row@lg">
  <!-- Changes direction based on breakpoint -->
</div>

Classes, base:

flex: Creates a flex container

Direction:

row: Sets flex-direction to row
col: Sets flex-direction to column
row-reverse: Reverses row direction
col-reverse: Reverses column direction

Wrapping:

wrap/nowrap/wrap-reverse: Controls flex-wrap

Alignment:

start/end/center/between/around/evenly: Controls justify-content
stretch: Direct children share the main axis equally (flex: 1 1 0%)
x-start/x-end/x-center/x-stretch/x-baseline: Controls align-items
x-content-{start|end|center|between|around|evenly|stretch}: Controls align-content

Child elements (direct children of .flex):

fill-{1-12}: Takes that many of the 12 columns, minus the gap
fill-auto/fill-full: Grows and shrinks from its content size, or takes the full row
grow/no-grow: Allows or prevents growing
shrink/no-shrink/shrink-twice: Controls shrink behavior
self-{auto|start|end|center|stretch|baseline}: Controls align-self
order-{1-12}, order-first, order-last, order-none: Controls order

Responsive: all classes support responsive variants using the @breakpoint suffix:

row@md: Row direction on medium screens and up
between@lg: Space-between on large screens

See also the grid layout (layouts/_grid.scss).

Generated from the doc blocks in the core source when the site is built, so it always matches the current release of @wovenui/core. Every example is compiled against core during the build; open Compiled CSSunder an example to see its output. Guide: Flex. The A to Z index lists every public mixin and function.

Source: layouts/_flex.scss

Mixins

row row-reverse col col-reverse wrap nowrap wrap-reverse start end center stretch between around evenly x-start x-end x-center x-stretch x-baseline x-content-start x-content-end x-content-center x-content-between x-content-around x-content-evenly x-content-stretch self-auto self-start self-end self-center self-stretch self-baseline shrink no-shrink shrink-twice fill-full fill-auto grow no-grow grow-only fill

`row` mixin

Sets flex-direction to row; applies to a flex container.

@mixin row

Example

.toolbar {
  @include apply(flex, row);
}

Compiled CSS

.toolbar {
  display: flex;
  flex-direction: row;
}

flex-direction on MDN

See also: col, row-reverse. Source: layouts/_flex.scss:75

`row-reverse` mixin

Sets flex-direction to row-reverse; applies to a flex container.

@mixin row-reverse

Example

.toolbar {
  @include flex;
  @include row-reverse;
}

Compiled CSS

.toolbar {
  display: flex;
  flex-direction: row-reverse;
}

flex-direction on MDN

See also: row. Source: layouts/_flex.scss:87

`col` mixin

Sets flex-direction to column; applies to a flex container.

@mixin col

Example

.stack {
  @include apply(flex, col, gap(4));
}

Compiled CSS

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--wu-space-4);
}
.stack > * {
  --wu-gap: var(--wu-space-4);
}

flex-direction on MDN

See also: row, col-reverse. Source: layouts/_flex.scss:99

`col-reverse` mixin

Sets flex-direction to column-reverse; applies to a flex container.

@mixin col-reverse

Example

.chat-log {
  @include flex;
  @include col-reverse;
}

Compiled CSS

.chat-log {
  display: flex;
  flex-direction: column-reverse;
}

flex-direction on MDN

See also: col. Source: layouts/_flex.scss:111

`wrap` mixin

Sets flex-wrap to wrap so items move onto new lines; applies to a flex container.

@mixin wrap

Example

.tag-list {
  @include apply(flex, wrap, gap(2));
}

Compiled CSS

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wu-space-2);
}
.tag-list > * {
  --wu-gap: var(--wu-space-2);
}

flex-wrap on MDN

See also: nowrap, wrap-reverse. Source: layouts/_flex.scss:123

`nowrap` mixin

Sets flex-wrap to nowrap so items stay on one line; applies to a flex container.

@mixin nowrap

Example

.tabs {
  @include flex;
  @include nowrap;
}

Compiled CSS

.tabs {
  display: flex;
  flex-wrap: nowrap;
}

flex-wrap on MDN

See also: wrap. Source: layouts/_flex.scss:135

`wrap-reverse` mixin

Sets flex-wrap to wrap-reverse so new lines stack in reverse order; applies to a flex container.

@mixin wrap-reverse

Example

.tag-list {
  @include flex;
  @include wrap-reverse;
}

Compiled CSS

.tag-list {
  display: flex;
  flex-wrap: wrap-reverse;
}

flex-wrap on MDN

See also: wrap. Source: layouts/_flex.scss:147

`start` mixin

Sets justify-content to flex-start, packing items at the start of the main axis.

@mixin start

Example

.toolbar {
  @include apply(flex, start);
}

Compiled CSS

.toolbar {
  display: flex;
  justify-content: flex-start;
}

justify-content on MDN

See also: end, center, between. Source: layouts/_flex.scss:160

`end` mixin

Sets justify-content to flex-end, packing items at the end of the main axis.

@mixin end

Example

.actions {
  @include apply(flex, end, gap(2));
}

Compiled CSS

.actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--wu-space-2);
}
.actions > * {
  --wu-gap: var(--wu-space-2);
}

justify-content on MDN

See also: start, center. Source: layouts/_flex.scss:172

`center` mixin

Sets justify-content to center, centering items on the main axis.

@mixin center

Example

.hero {
  @include apply(flex, center, x-center);
}

Compiled CSS

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
}

justify-content on MDN

See also: x-center. Source: layouts/_flex.scss:183

`stretch` mixin

Makes the direct children of a flex container share the main axis equally (each child gets flex: 1 1 0%).

Takes no argument; when one child must be wider, give it a fill-{n} or no-grow class.

@mixin stretch

Output: & > * { flex: 1 1 0% }

Example

.tabs {
  @include apply(flex, stretch);
}
.segmented {
  @include flex;
  @include stretch; // .segmented > * { flex: 1 1 0% }
}

Compiled CSS

.tabs {
  display: flex;
}
.tabs > * {
  flex: 1 1 0%;
}

.segmented {
  display: flex;
}
.segmented > * {
  flex: 1 1 0%;
}

See also: grow, x-stretch. Source: layouts/_flex.scss:201

`between` mixin

Sets justify-content to space-between, spreading items with the free space between them.

@mixin between

Example

.header {
  @include apply(flex, between, x-center);
}

Compiled CSS

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

justify-content on MDN

See also: around, evenly. Source: layouts/_flex.scss:215

`around` mixin

Sets justify-content to space-around, giving each item equal space on both sides.

@mixin around

Example

.nav {
  @include flex;
  @include around;
}

Compiled CSS

.nav {
  display: flex;
  justify-content: space-around;
}

justify-content on MDN

See also: between, evenly. Source: layouts/_flex.scss:228

`evenly` mixin

Sets justify-content to space-evenly, making every gap between and around items equal.

@mixin evenly

Example

.stats {
  @include flex;
  @include evenly;
}

Compiled CSS

.stats {
  display: flex;
  justify-content: space-evenly;
}

justify-content on MDN

See also: between, around. Source: layouts/_flex.scss:241

`x-start` mixin

Sets align-items to flex-start, aligning items to the start of the cross axis.

@mixin x-start

Example

.media {
  @include apply(flex, x-start, gap(4));
}

Compiled CSS

.media {
  display: flex;
  align-items: flex-start;
  gap: var(--wu-space-4);
}
.media > * {
  --wu-gap: var(--wu-space-4);
}

align-items on MDN

See also: x-end, x-center. Source: layouts/_flex.scss:255

`x-end` mixin

Sets align-items to flex-end, aligning items to the end of the cross axis.

@mixin x-end

Example

.bars {
  @include flex;
  @include x-end;
}

Compiled CSS

.bars {
  display: flex;
  align-items: flex-end;
}

align-items on MDN

See also: x-start. Source: layouts/_flex.scss:267

`x-center` mixin

Sets align-items to center, centering items on the cross axis.

@mixin x-center

Example

.header {
  @include apply(flex, between, x-center);
}

Compiled CSS

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

align-items on MDN

See also: center. Source: layouts/_flex.scss:278

`x-stretch` mixin

Sets align-items to stretch, stretching items to fill the cross axis.

@mixin x-stretch

Example

.columns {
  @include flex;
  @include x-stretch;
}

Compiled CSS

.columns {
  display: flex;
  align-items: stretch;
}

align-items on MDN

See also: x-start. Source: layouts/_flex.scss:290

`x-baseline` mixin

Sets align-items to baseline, aligning items along their text baseline.

@mixin x-baseline

Example

.price-row {
  @include apply(flex, x-baseline, gap(2));
}

Compiled CSS

.price-row {
  display: flex;
  align-items: baseline;
  gap: var(--wu-space-2);
}
.price-row > * {
  --wu-gap: var(--wu-space-2);
}

align-items on MDN

See also: x-center. Source: layouts/_flex.scss:301

`x-content-start` mixin

Sets align-content to flex-start, packing wrapped lines at the start of the cross axis.

@mixin x-content-start

Example

.tag-list {
  @include apply(flex, wrap, x-content-start);
}

Compiled CSS

.tag-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

align-content on MDN

See also: x-content-end. Source: layouts/_flex.scss:314

`x-content-end` mixin

Sets align-content to flex-end, packing wrapped lines at the end of the cross axis.

@mixin x-content-end

Example

.tag-list {
  @include apply(flex, wrap, x-content-end);
}

Compiled CSS

.tag-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

align-content on MDN

See also: x-content-start. Source: layouts/_flex.scss:325

`x-content-center` mixin

Sets align-content to center, centering wrapped lines on the cross axis.

@mixin x-content-center

Example

.gallery {
  @include apply(flex, wrap, x-content-center);
}

Compiled CSS

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

align-content on MDN

See also: x-center. Source: layouts/_flex.scss:336

`x-content-between` mixin

Sets align-content to space-between, spreading wrapped lines with the free space between them.

@mixin x-content-between

Example

.gallery {
  @include apply(flex, wrap, x-content-between);
}

Compiled CSS

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

align-content on MDN

See also: x-content-around, x-content-evenly. Source: layouts/_flex.scss:348

`x-content-around` mixin

Sets align-content to space-around, giving each wrapped line equal space on both sides.

@mixin x-content-around

Example

.gallery {
  @include apply(flex, wrap, x-content-around);
}

Compiled CSS

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

align-content on MDN

See also: x-content-between. Source: layouts/_flex.scss:359

`x-content-evenly` mixin

Sets align-content to space-evenly, making every gap between and around wrapped lines equal.

@mixin x-content-evenly

Example

.gallery {
  @include apply(flex, wrap, x-content-evenly);
}

Compiled CSS

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
}

align-content on MDN

See also: x-content-between. Source: layouts/_flex.scss:370

`x-content-stretch` mixin

Sets align-content to stretch, stretching wrapped lines to fill the cross axis.

@mixin x-content-stretch

Example

.gallery {
  @include apply(flex, wrap, x-content-stretch);
}

Compiled CSS

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
}

align-content on MDN

See also: x-stretch. Source: layouts/_flex.scss:381

`self-auto` mixin

Sets align-self to auto, so the item follows the container's align-items.

@mixin self-auto

Example

.item {
  @include self-auto;
}

Compiled CSS

.item {
  align-self: auto;
}

align-self on MDN

See also: self-start, self-center. Source: layouts/_flex.scss:395

`self-start` mixin

Sets align-self to flex-start, aligning this item to the start of the cross axis.

@mixin self-start

Example

.badge {
  @include self-start;
}

Compiled CSS

.badge {
  align-self: flex-start;
}

align-self on MDN

See also: self-end. Source: layouts/_flex.scss:406

`self-end` mixin

Sets align-self to flex-end, aligning this item to the end of the cross axis.

@mixin self-end

Example

.timestamp {
  @include self-end;
}

Compiled CSS

.timestamp {
  align-self: flex-end;
}

align-self on MDN

See also: self-start. Source: layouts/_flex.scss:417

`self-center` mixin

Sets align-self to center, centering this item on the cross axis.

@mixin self-center

Example

.icon {
  @include self-center;
}

Compiled CSS

.icon {
  align-self: center;
}

align-self on MDN

See also: x-center. Source: layouts/_flex.scss:428

`self-stretch` mixin

Sets align-self to stretch, stretching this item to fill the cross axis.

@mixin self-stretch

Example

.divider {
  @include self-stretch;
}

Compiled CSS

.divider {
  align-self: stretch;
}

align-self on MDN

See also: x-stretch. Source: layouts/_flex.scss:439

`self-baseline` mixin

Sets align-self to baseline, aligning this item along the text baseline.

@mixin self-baseline

Example

.label {
  @include self-baseline;
}

Compiled CSS

.label {
  align-self: baseline;
}

align-self on MDN

See also: x-baseline. Source: layouts/_flex.scss:450

`shrink` mixin

Sets flex-shrink to 1 so the item can shrink when space runs out.

@mixin shrink

Example

.title {
  @include apply(shrink, truncate);
}

Compiled CSS

.title {
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

flex-shrink on MDN

See also: no-shrink, shrink-twice. Source: layouts/_flex.scss:462

`no-shrink` mixin

Sets flex-shrink to 0 so the item never shrinks below its size.

@mixin no-shrink

Example

.avatar {
  @include apply(no-shrink, width(10));
}

Compiled CSS

.avatar {
  flex-shrink: 0;
  width: var(--wu-space-10);
}

flex-shrink on MDN

See also: shrink. Source: layouts/_flex.scss:473

`shrink-twice` mixin

Sets flex-shrink to 2 so the item shrinks twice as fast as items with flex-shrink 1.

@mixin shrink-twice

Example

.sidebar {
  @include shrink-twice;
}

Compiled CSS

.sidebar {
  flex-shrink: 2;
}

flex-shrink on MDN

See also: shrink. Source: layouts/_flex.scss:484

`fill-full` mixin

Sets flex to 0 0 100% so the item takes a full row and neither grows nor shrinks.

@mixin fill-full

Example

.banner {
  @include fill-full;
}

Compiled CSS

.banner {
  flex: 0 0 100%;
}

flex on MDN

See also: fill, fill-auto. Source: layouts/_flex.scss:498

`fill-auto` mixin

Sets flex to 1 1 auto so the item starts at its content size, then grows and shrinks.

@mixin fill-auto

Example

.search {
  @include fill-auto;
}

Compiled CSS

.search {
  flex: 1 1 auto;
}

flex on MDN

See also: grow, fill-full. Source: layouts/_flex.scss:510

`grow` mixin

Sets flex to 1 1 0% so the item grows and shrinks from a zero base, sharing space equally with other grow items.

@mixin grow

Example

.main {
  @include grow;
}

Compiled CSS

.main {
  flex: 1 1 0%;
}

flex on MDN

See also: grow-only, no-grow, fill-auto. Source: layouts/_flex.scss:523

`no-grow` mixin

Sets flex to none so the item keeps its size and neither grows nor shrinks.

@mixin no-grow

Example

.logo {
  @include no-grow;
}

Compiled CSS

.logo {
  flex: none;
}

flex on MDN

See also: grow. Source: layouts/_flex.scss:534

`grow-only` mixin

Sets flex to 1 0 auto so the item grows from its content size but never shrinks.

@mixin grow-only

Example

.content {
  @include grow-only;
}

Compiled CSS

.content {
  flex: 1 0 auto;
}

flex on MDN

See also: grow. Source: layouts/_flex.scss:545

`fill` mixin

Sizes a flex child to span a number of columns out of $column-count (12 by default), subtracting the container gap from --wu-gap.

Gap mixins set --wu-gap on direct children, so place the item directly inside the gap container; without a gap it reads the registered initial value 0px.

@mixin fill($size)

Parameter	Type	Default	Description
`$size`	`Number`	Required	Whole number of columns to span, from 1 to `$column-count`; a fraction, 0, a negative number, more than `$column-count`, a value with a unit or a non-number raises an error

Output: flex: 0 0 <width>; max-width: <width>; min-width: 0, where width is a calc() over 100% and var(--wu-gap)

Example

.sidebar {
  @include fill(4); // one third of the row, minus its share of the gap
}
.layout {
  @include apply(flex, gap(4));
  > .main {
    @include fill(8);
  }
}

Compiled CSS

.sidebar {
  flex: 0 0 calc((100% - 2 * var(--wu-gap)) / 3);
  max-width: calc((100% - 2 * var(--wu-gap)) / 3);
  min-width: 0;
}

.layout {
  display: flex;
  gap: var(--wu-space-4);
}
.layout > * {
  --wu-gap: var(--wu-space-4);
}
.layout > .main {
  flex: 0 0 calc((100% - 0.5 * var(--wu-gap)) / 1.5);
  max-width: calc((100% - 0.5 * var(--wu-gap)) / 1.5);
  min-width: 0;
}

See also: grow, fill-full, gap. Source: layouts/_flex.scss:567

Flex mixins

Mixins

row mixin

row-reverse mixin

col mixin

col-reverse mixin

wrap mixin

nowrap mixin

wrap-reverse mixin

start mixin

end mixin

center mixin

stretch mixin

between mixin

around mixin

evenly mixin

x-start mixin

x-end mixin

x-center mixin

x-stretch mixin

x-baseline mixin

x-content-start mixin

x-content-end mixin

x-content-center mixin

x-content-between mixin

x-content-around mixin

x-content-evenly mixin

x-content-stretch mixin

self-auto mixin

self-start mixin

self-end mixin

self-center mixin

self-stretch mixin

self-baseline mixin

shrink mixin

no-shrink mixin

shrink-twice mixin

fill-full mixin

fill-auto mixin

grow mixin

no-grow mixin

grow-only mixin

fill mixin

`row` mixin

`row-reverse` mixin

`col` mixin

`col-reverse` mixin

`wrap` mixin

`nowrap` mixin

`wrap-reverse` mixin

`start` mixin

`end` mixin

`center` mixin

`stretch` mixin

`between` mixin

`around` mixin

`evenly` mixin

`x-start` mixin

`x-end` mixin

`x-center` mixin

`x-stretch` mixin

`x-baseline` mixin

`x-content-start` mixin

`x-content-end` mixin

`x-content-center` mixin

`x-content-between` mixin

`x-content-around` mixin

`x-content-evenly` mixin

`x-content-stretch` mixin

`self-auto` mixin

`self-start` mixin

`self-end` mixin

`self-center` mixin

`self-stretch` mixin

`self-baseline` mixin

`shrink` mixin

`no-shrink` mixin

`shrink-twice` mixin

`fill-full` mixin

`fill-auto` mixin

`grow` mixin

`no-grow` mixin

`grow-only` mixin

`fill` mixin