A collection of dynamically generated flexbox-related utility classes.

Installation

Using npm:

npm i -S jigsass-utils-flexbox

Available classes

Class names follow the Emmet abbreviation syntax, with colons (':') replaced by two dashes (--) to follow BEM naming conventions. E.g., the justify-content: space-around utility class name is .u-jc--sa.

• .u-ac--c (align-content: center)
• .u-ac--fe (align-content: flex-end)
• .u-ac--fs (align-content: flex-start)
• .u-ac--s (align-content: stretch)
• .u-ac--sa (align-content: space-around)
• .u-ac--sb (align-content: space-between)

• .u-ai--b (align-items: baseline)
• .u-ai--c (align-items: center)
• .u-ai--fe (align-items: flex-end)
• .u-ai--fs (align-items: flex-start)
• .u-ai--s (align-items: stretch)

• .u-as--a (align-self: auto)
• .u-as--b (align-self: baseline)
• .u-as--c (align-self: center)
• .u-as--fe (align-self: flex-end)
• .u-as--fs (align-self: flex-start)
• .u-as--s (align-self: stretch)

• .u-jc--c (justify-content: center)
• .u-jc--fe (justify-content: flex-end)
• .u-jc--fs (justify-content: flex-start)
• .u-jc--sa (justify-content: space-around)
• .u-jc--sb (justify-content: space-between)

• .u-fb--a (flex-basis: auto)
• .u-fb--<width> (flex-basis: <width>)

• .u-fxg--<number> (flex-grow: <number>)
• .u-fxsh--<number> (flex-shrink: <number>)

• .u-fxw--n (flex-wrap: nowrap)
• .u-fxw--w (flex-wrap: wrap)
• .u-fxw--wr (flex-wrap: wrap-reverse)

• .u-fxd--c (flex-direction: column)
• .u-fxd--cr (flex-direction: column-reverse)
• .u-fxd--r (flex-direction: row)
• .u-fxd--rr (flex-direction: row-reverse)

• .u-ord--<number> (order: <number>)
• .u-ord--min-<number> (order: -<number>)

Usage

Import JigSass Utils Flexbox into your main scss file near its very end, together with all other utilities (utilities should always be the last to be imported).

@import 'path/to/jigsass-utils-flexbox/scss/index';

Like all other JigSass Utils, JigSass Flexbox does not automatically generate any CSS when imported. You would need to explicitly indicate that each individual flexbox class should actually be generated in each component or object it is used in (clarification: This will include style declarations inside .foo and .bar):

// _c.foo.scss
.foo {
  @include jigsass-util(u-ord, $modifier: 1); // <-- order: 1

  ...
}

// _c.bar.scss
.bar {
  @include jigsass-util(u-jc, $modifier: fe);  // <-- justify-content: flex-end
  @include jigsass-util(u-ord, $modifier: min-1, $from: large); // <-- ordr: -1 from large bp and on.

  ...
}

Doing so helps us a great deal with portability, as no matter where we import component or object partials, the correct utility classes will be generated. Think of it as a poor man's dependency management.

Developer communication is also assisted by including "dependencies" wherever they are required, as anyone going through a partial, can easily understand how it should be marked up with just a glance.

As far as bloat goes, just don't worry about it - the actual styles will only be generated once, at the location in the cascade where the Jigsass Flexbox partial was imported into the main file.

JigSass Flexbox classes are responsive-enabled, using JigSass MQ and the breakpoints defined in the $jigsass-breakpoints variable.

Based on the breakpoint arguments passed to jigsass-util when including a flexbox class, responsive modifiers are generated according to the following logic:

.u-<util>--<modifier>[-[-from-<breakpoint-name>][-until-<breakpoint-name>][-misc-<breakpoint-name>]]

So, assuming the medium, large and landscape breakpoints are defined in $jigsass-breakpoints as 600px, 1024px and (orientation: landscape) respectively,

@include jigsass-util(u-ord, $modifier: 2);

will generate the .u-ord--2 class, which is not limited to any media-query.

@include jigsass-util(u-ord, $modifier: 2, $until: medium);

will generate the .u-ord--2--until-medium class, which will be in effect at (max-width: 37.49em) and will override styles in the default class until that point.

@include jigsass-util(u-ord, $modifier: min2, $from: large, $misc: landscape);

will generate the .u-ord-min2--from-large-when-landscape class, which will go into effect at (min-width: 64em) and (orientation: landscape) and will override styles in the default class under these conditions.

License: MIT

.u-ac--c

A utility class for setting an element's align-content value to center.

Include with:

@include jigsass-util(u-ac, $modifier: c [, $from, $until, $misc]);

Example

<div class="demo-wrapper demo-wrap u-ac--c" style="height: 15rem;">
  <div class="fpo" style="width: 40%;"></div>
  <div class="fpo" style="width: 40%;"></div>
  <div class="fpo" style="width: 40%;"></div>
  <div class="fpo" style="width: 40%;"></div>
</div>

.u-ac--fe

A utility class for setting an element's align-content value to flex-end.

Include with:

@include jigsass-util(u-ac, $modifier: fe [, $from, $until, $misc]);

Example

<div class="demo-wrapper demo-wrap u-ac--fe" style="height: 15rem;">
  <div class="fpo" style="width: 40%;"></div>
  <div class="fpo" style="width: 40%;"></div>
  <div class="fpo" style="width: 40%;"></div>
  <div class="fpo" style="width: 40%;"></div>
</div>

.u-ac--fs

A utility class for setting an element's align-content value to flex-start.

Include with:

@include jigsass-util(u-ac, $modifier: fs [, $from, $until, $misc]);

Example

<div class="demo-wrapper demo-wrap u-ac--fs" style="height: 15rem;">
  <div class="fpo" style="width: 40%;"></div>
  <div class="fpo" style="width: 40%;"></div>
  <div class="fpo" style="width: 40%;"></div>
  <div class="fpo" style="width: 40%;"></div>
</div>

.u-ac--s

A utility class for setting an element's align-content value to stretch.

Include with:

@include jigsass-util(u-ac, $modifier: s [, $from, $until, $misc]);

Example

<div class="demo-wrapper demo-wrap u-ac--s" style="height: 15rem;">
  <div class="fpo" style="width: 40%;"></div>
  <div class="fpo" style="width: 40%;"></div>
  <div class="fpo" style="width: 40%;"></div>
  <div class="fpo" style="width: 40%;"></div>
</div>

.u-ac--sa

A utility class for setting an element's align-content value to space-around.

Include with:

@include jigsass-util(u-ac, $modifier: sa [, $from, $until, $misc]);

Example

<div class="demo-wrapper demo-wrap u-ac--sa" style="height: 15rem;">
  <div class="fpo" style="width: 40%;"></div>
  <div class="fpo" style="width: 40%;"></div>
  <div class="fpo" style="width: 40%;"></div>
  <div class="fpo" style="width: 40%;"></div>
</div>

.u-ac--sb

A utility class for setting an element's align-content value to space-between.

Include with:

@include jigsass-util(u-ac, $modifier: sb [, $from, $until, $misc]);

Example

<div class="demo-wrapper demo-wrap u-ac--sb" style="height: 15rem;">
  <div class="fpo" style="width: 40%;"></div>
  <div class="fpo" style="width: 40%;"></div>
  <div class="fpo" style="width: 40%;"></div>
  <div class="fpo" style="width: 40%;"></div>
</div>

.u-ai--b

A utility class for setting an element's align-items value to baseline.

Include with:

@include jigsass-util(u-ai, $modifier: b [, $from, $until, $misc]);

Example

<div class="demo-wrapper u-ai--b">
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te.
  </div>
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique, at vix soluta eruditi assueverit, pro dico utinam forensibus ei. Ullum propriae pro no.
  </div>
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his.
  </div>
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique.
  </div>
</div>

.u-ai--c

A utility class for setting an element's align-items value to center.

Include with:

@include jigsass-util(u-ai, $modifier: c [, $from, $until, $misc]);

Example

<div class="demo-wrapper u-ai--c">
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te.
  </div>
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique, at vix soluta eruditi assueverit, pro dico utinam forensibus ei. Ullum propriae pro no.
  </div>
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his.
  </div>
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique.
  </div>
</div>

.u-ai--fe

A utility class for setting an element's align-items value to flex-end.

Include with:

@include jigsass-util(u-ai, $modifier: fe [, $from, $until, $misc]);

Example

<div class="demo-wrapper u-ai--fe">
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te.
  </div>
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique, at vix soluta eruditi assueverit, pro dico utinam forensibus ei. Ullum propriae pro no.
  </div>
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his.
  </div>
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique.
  </div>
</div>

.u-ai--fs

A utility class for setting an element's align-items value to flex-start.

Include with:

@include jigsass-util(u-ai, $modifier: fs [, $from, $until, $misc]);

Example

<div class="demo-wrapper u-ai--fs">
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te.
  </div>
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique, at vix soluta eruditi assueverit, pro dico utinam forensibus ei. Ullum propriae pro no.
  </div>
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his.
  </div>
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique.
  </div>
</div>

.u-ai--s

A utility class for setting an element's align-items value to stretch.

Include with:

@include jigsass-util(u-ai, $modifier: s [, $from, $until, $misc]);

Example

<div class="demo-wrapper u-ai--s">
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te.
  </div>
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique, at vix soluta eruditi assueverit, pro dico utinam forensibus ei. Ullum propriae pro no.
  </div>
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his.
  </div>
  <div class="fpo">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique.
  </div>
</div>

.u-as--a

A utility class for setting an element's align-self value to auto.

Include with:

@include jigsass-util(u-as, $modifier: a [, $from, $until, $misc]);

Example

<div class="demo-wrapper" style="align-items: flex-start";>
  <div class="fpo" style="width: 25%">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique, at vix soluta eruditi assueverit, pro dico utinam forensibus ei. Ullum propriae pro no.
  </div>
  <div class="fpo u-as--a" style="width: 25%">
    This element's <code>align-self</code> property is set to <code>auto</code>
  </div>
  <div class="fpo" style="width: 25%">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his.
  </div>
  <div class="fpo" style="width: 25%">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique.
  </div>
</div>

.u-as--b

A utility class for setting an element's align-self value to baseline.

Include with:

@include jigsass-util(u-as, $modifier: b [, $from, $until, $misc]);

Example

<div class="demo-wrapper" style="align-items: flex-start";>
  <div class="fpo" style="width: 25%">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique, at vix soluta eruditi assueverit, pro dico utinam forensibus ei. Ullum propriae pro no.
  </div>
  <div class="fpo u-as--b" style="width: 25%">
    This element's <code>align-self</code> property is set to <code>baseline</code>
  </div>
  <div class="fpo" style="width: 25%">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his.
  </div>
  <div class="fpo" style="width: 25%">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique.
  </div>
</div>

.u-as--c

A utility class for setting an element's align-self value to center.

Include with:

@include jigsass-util(u-as, $modifier: c [, $from, $until, $misc]);

Example

<div class="demo-wrapper" style="align-items: flex-start";>
  <div class="fpo" style="width: 25%">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique, at vix soluta eruditi assueverit, pro dico utinam forensibus ei. Ullum propriae pro no.
  </div>
  <div class="fpo u-as--c" style="width: 25%">
    This element's <code>align-self</code> property is set to <code>center</code>
  </div>
  <div class="fpo" style="width: 25%">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his.
  </div>
  <div class="fpo" style="width: 25%">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique.
  </div>
</div>

.u-as--fe

A utility class for setting an element's align-self value to flex-end.

Include with:

@include jigsass-util(u-as, $modifier: fe [, $from, $until, $misc]);

Example

<div class="demo-wrapper" style="align-items: flex-start";>
  <div class="fpo" style="width: 25%">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique, at vix soluta eruditi assueverit, pro dico utinam forensibus ei. Ullum propriae pro no.
  </div>
  <div class="fpo u-as--fe" style="width: 25%">
    This element's <code>align-self</code> property is set to <code>flex-end</code>
  </div>
  <div class="fpo" style="width: 25%">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his.
  </div>
  <div class="fpo" style="width: 25%">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique.
  </div>
</div>

.u-as--fs

A utility class for setting an element's align-self value to flex-start.

Include with:

@include jigsass-util(u-as, $modifier: fs [, $from, $until, $misc]);

Example

<div class="demo-wrapper" style="align-items: flex-end";>
  <div class="fpo" style="width: 25%">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique, at vix soluta eruditi assueverit, pro dico utinam forensibus ei. Ullum propriae pro no.
  </div>
  <div class="fpo u-as--fs" style="width: 25%">
    This element's <code>align-self</code> property is set to <code>flex-start</code>
  </div>
  <div class="fpo" style="width: 25%">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his.
  </div>
  <div class="fpo" style="width: 25%">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique.
  </div>
</div>

.u-as--s

A utility class for setting an element's align-self value to stretch.

Include with:

@include jigsass-util(u-as, $modifier: s [, $from, $until, $misc]);

Example

<div class="demo-wrapper" style="align-items: flex-start";>
  <div class="fpo" style="width: 25%">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique, at vix soluta eruditi assueverit, pro dico utinam forensibus ei. Ullum propriae pro no.
  </div>
  <div class="fpo u-as--s" style="width: 25%">
    This element's <code>align-self</code> property is set to <code>stretch</code>
  </div>
  <div class="fpo" style="width: 25%">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his.
  </div>
  <div class="fpo" style="width: 25%">
    Lorem ipsum dolor sit amet, pro postea officiis periculis te. Ad mel tale suas vidit, stet docendi eloquentiam ut his. Est an integre offendit instructior. Ea sed cibo dolor, vel an nostro ceteros democritum. Vel at ipsum commodo similique.
  </div>
</div>

.u-jc--c

A utility class for setting an element's justify-content value to center.

Include with:

@include jigsass-util(u-jc, $modifier: c [, $from, $until, $misc]);

Example

<div class="demo-wrapper u-jc--c">
  <div class="fpo" style="width: 33%"></div>
  <div class="fpo" style="width: 33%"></div>
</div>

.u-jc--fe

A utility class for setting an element's justify-content value to flex-end.

Include with:

@include jigsass-util(u-jc, $modifier: fe [, $from, $until, $misc]);

Example

<div class="demo-wrapper u-jc--fe">
  <div class="fpo" style="width: 33%"></div>
  <div class="fpo" style="width: 33%"></div>
</div>

.u-jc--fs

A utility class for setting an element's justify-content value to flex-start.

Include with:

@include jigsass-util(u-jc, $modifier: fs [, $from, $until, $misc]);

Example

<div class="demo-wrapper u-jc--fs">
  <div class="fpo" style="width: 33%"></div>
  <div class="fpo" style="width: 33%"></div>
</div>

.u-jc--sa

A utility class for setting an element's justify-content value to space-around.

Include with:

@include jigsass-util(u-jc, $modifier: sa [, $from, $until, $misc]);

Example

<div class="demo-wrapper u-jc--sa">
  <div class="fpo" style="width: 33%"></div>
  <div class="fpo" style="width: 33%"></div>
</div>

.u-jc--sb

A utility class for setting an element's justify-content value to space-between.

Include with:

@include jigsass-util(u-jc, $modifier: sb [, $from, $until, $misc]);

Example

<div class="demo-wrapper u-jc--sb">
  <div class="fpo" style="width: 33%"></div>
  <div class="fpo" style="width: 33%"></div>
</div>

.u-fb--a

A utility class for setting an element's flex-basis value to auto.

Include with:

@include jigsass-util(u-fb, $modifier: a [, $from, $until, $misc]);

Example

<div class="demo-wrapper">
  <div class="fpo"></div>
  <div class="fpo  u-fb--a">flex-basis: a</div>
  <div class="fpo"></div>
</div>

.u-fb--25%

A utility class for setting an element's flex-basis value to 25%.

Include with:

@include jigsass-util(u-fb, $modifier: 25% [, $from, $until, $misc]);

Example

<div class="demo-wrapper">
  <div class="fpo"></div>
  <div class="fpo  u-fb--25%">flex-basis: 25%</div>
  <div class="fpo"></div>
</div>

.u-fb--50%

A utility class for setting an element's flex-basis value to 50%.

Include with:

@include jigsass-util(u-fb, $modifier: 50% [, $from, $until, $misc]);

Example

<div class="demo-wrapper">
  <div class="fpo"></div>
  <div class="fpo  u-fb--50%">flex-basis: 50%</div>
  <div class="fpo"></div>
</div>

.u-fb--75%

A utility class for setting an element's flex-basis value to 75%.

Include with:

@include jigsass-util(u-fb, $modifier: 75% [, $from, $until, $misc]);

Example

<div class="demo-wrapper">
  <div class="fpo"></div>
  <div class="fpo  u-fb--75%">flex-basis: 75%</div>
  <div class="fpo"></div>
</div>

.u-fxg--1

A utility class for setting an element's flex-grow value to 1.

Include with:

@include jigsass-util(u-fxg, $modifier: 1 [, $from, $until, $misc]);

.u-fxsh--1

A utility class for setting an element's flex-shrink value to 1.

Include with:

@include jigsass-util(u-fxsh, $modifier: 1 [, $from, $until, $misc]);

.u-fxw--n

A utility class for setting an element's flex-wrap value to nowrap.

Include with:

@include jigsass-util(u-fxw, $modifier: n [, $from, $until, $misc]);

Example

<div class="demo-wrapper u-fxw--n">
  <div class="fpo" style="width: 40%"></div>
  <div class="fpo" style="width: 40%"></div>
  <div class="fpo" style="width: 40%"></div>
</div>

.u-fxw--w

A utility class for setting an element's flex-wrap value to wrap.

Include with:

@include jigsass-util(u-fxw, $modifier: w [, $from, $until, $misc]);

Example

<div class="demo-wrapper u-fxw--w">
  <div class="fpo" style="width: 40%"></div>
  <div class="fpo" style="width: 40%"></div>
  <div class="fpo" style="width: 40%"></div>
</div>

.u-fxw--wr

A utility class for setting an element's flex-wrap value to wrap-reverse.

Include with:

@include jigsass-util(u-fxw, $modifier: wr [, $from, $until, $misc]);

Example

<div class="demo-wrapper u-fxw--wr">
  <div class="fpo" style="width: 40%"></div>
  <div class="fpo" style="width: 40%"></div>
  <div class="fpo" style="width: 40%"></div>
</div>

.u-fxd--c

A utility class for setting an element's flex-direction value to column.

Include with:

@include jigsass-util(u-fxd, $modifier: c [, $from, $until, $misc]);

Example

<div class="demo-wrapper u-fxd--c">
  <div class="fpo">item 1</div>
  <div class="fpo">item 2</div>
  <div class="fpo">item 3</div>
</div>

.u-fxd--cr

A utility class for setting an element's flex-direction value to column-reverse.

Include with:

@include jigsass-util(u-fxd, $modifier: cr [, $from, $until, $misc]);

Example

<div class="demo-wrapper u-fxd--cr">
  <div class="fpo">item 1</div>
  <div class="fpo">item 2</div>
  <div class="fpo">item 3</div>
</div>

.u-fxd--r

A utility class for setting an element's flex-direction value to row.

Include with:

@include jigsass-util(u-fxd, $modifier: r [, $from, $until, $misc]);

Example

<div class="demo-wrapper u-fxd--r">
  <div class="fpo">item 1</div>
  <div class="fpo">item 2</div>
  <div class="fpo">item 3</div>
</div>

.u-fxd--rr

A utility class for setting an element's flex-direction value to row-reverse.

Include with:

@include jigsass-util(u-fxd, $modifier: rr [, $from, $until, $misc]);

Example

<div class="demo-wrapper u-fxd--rr">
  <div class="fpo">item 1</div>
  <div class="fpo">item 2</div>
  <div class="fpo">item 3</div>
</div>

.u-ord--min-1

A utility class for setting an element's flex-direction value to -1.

Include with:

@include jigsass-util(u-ord, $modifier: min-1 [, $from, $until, $misc]);

Example

<div class="demo-wrapper">
  <div class="fpo  fpo--b">item 1</div>
  <div class="[ fpo fpo--b ] u-ord--min-1">item 2</div>
  <div class="fpo fpo--b">item 3</div>
</div>

.u-ord--1

A utility class for setting an element's flex-direction value to 1.

Include with:

@include jigsass-util(u-ord, $modifier: 1 [, $from, $until, $misc]);

Example

<div class="demo-wrapper">
  <div class="fpo  fpo--b">item 1</div>
  <div class="[ fpo fpo--b ] u-ord--1">item 2</div>
  <div class="fpo fpo--b">item 3</div>
</div>