Flexbox utilities for SUIT CSS

Downloads in past


6022.0.15 years ago7 years agoMinified + gzip package size for suitcss-utils-flex in KB


SUIT CSS utilities: flex
Build Status
SUIT CSS flexbox utilities


  • npm: npm install suitcss-utils-flex
  • Download: zip

Available classes

  • u-flex - Create a flex container
  • u-flexInline - Create an inline flex container

  • u-flexRow - Displays items in a row
  • u-flexRowReverse - Reverses items in a row
  • u-flexCol - Display items in a column
  • u-flexColReverse - Reverses items in a column

  • u-flexWrap - Wrap items onto another line when space allows
  • u-flexNoWrap - Force items to stay on one line
  • u-flexWrapReverse - Wrap items and reverse direction

  • u-flexJustifyStart - Align items at the start of the main axis
  • u-flexJustifyEnd - Align items at the end of the main axis
  • u-flexJustifyCenter - Align items at the center of the main axis
  • u-flexJustifyBetween - Items have space between each other on main axis
  • u-flexJustifyAround - Items have space around each other on main axis

  • u-flexAlignItemsStretch - Items stretch to fill container
  • u-flexAlignItemsStart - Cross-start margin edge of the items is placed on the cross-start line
  • u-flexAlignItemsEnd - Cross-end margin edge of the items is placed on the cross-end line
  • u-flexAlignItemsCenter - Items are centered in the cross-axis
  • u-flexAlignItemsBaseline - Items have their baselines aligned on the cross axis

  • u-flexAlignContentStart - Items are packed to the start of the container
  • u-flexAlignContentEnd - Items are packed to the end of the container
  • u-flexAlignContentCenter - Items are packed to the centre of the container
  • u-flexAlignContentStretch - Lines stretch to take up the remaining space
  • u-flexAlignContentBetween - Lines evenly distributed; first and last lines at container edge
  • u-flexAlignContentAround - Lines evenly distributed with equal space around each line

  • u-flexAlignSelfStart - Aligns single item at cross axis start
  • u-flexAlignSelfEnd - Aligns single item at cross axis end
  • u-flexAlignSelfCenter - Aligns single item at cross axis centre-
  • u-flexAlignSelfStretch - Stretches single item from cross start to end
  • u-flexAlignSelfAuto - Uses the default set by align-items

  • u-flexOrderFirst - Positions an item at the start
  • u-flexOrderLast - Positions an item at the end
  • u-flexOrderNone - Sets item order to the default of 0

  • u-flexGrowX - Specify how much the flex item will grow relatively

X can be any of the following numbers: 1, 2, 3, 4, 5.
  • u-flexShrinkX - Specify how much the flex item will shrink relatively

X can be any of the following numbers: 0, 1, 2, 3, 4, 5.
Used to override other utilities and tweak how space is distributed.
  • u-flexBasisAuto
  • u-flexBasis0

flex shorthand
  • u-flexInitial - Sizes the item based on the width/height properties
  • u-flexAuto - Sizes the item based on the width/height properties, but makes
them fully flexible, so that they absorb any free space along the main axis.
  • u-flexNone - Sizes the item according to the width/height properties, but
makes the flex item fully inflexible. Similar to initial, except that flex items are not allowed to shrink, even in overflow situations.
Aligning with auto margins
  • u-flexExpand - Expand all margins to fill remaining space
  • u-flexExpandTop - Expand top margin to fill remaining space
  • u-flexExpandRight - Expand right margin to fill remaining space
  • u-flexExpandBottom - Expand bottom margin to fill remaining space
  • u-flexExpandLeft - Expand left margin to fill remaining space

Read more about how this works.


All flex utilities can be limited to specific Media Query breakpoints.
  • u-sm-flexX - To use at the smallest Media Query breakpoint.
  • u-md-flexX - To use at the medium Media Query breakpoint.
  • u-lg-flexX - To use at the largest Media Query breakpoint.

<div class="u-md-flex u-md-flexWrap">
  <!-- flex items -->


There are 3 Media Query breakpoints:
  • --sm-viewport
  • --md-viewport
  • --lg-viewport

When using postcss-custom-media, breakpoints can be configured using @custom-media. For example:
@custom-media --sm-viewport (min-width:320px) and (max-width:640px);
@custom-media --md-viewport (min-width:640px) and (max-width:960px);
@custom-media --lg-viewport (min-width:960px);


Centring an element in its container

<div class="u-flex u-flexAlignItemsCenter u-flexJustifyCenter">
  <p>Some centred content</p>

Usage with Grid

Note: The Grid component already sets display: flex on the root element.
<div class="Grid Grid--alignBottom">
  <div class="Grid-cell u-size1of3 u-md-flexAlignSelfCenter">Content</div>
  <div class="Grid-cell u-size1of3">Content</div>
  <div class="Grid-cell u-size1of3">Content</div>

Usage with utils-size

<div class="u-flex u-flexJustifyEnd">
  <div class="u-size4of12">Content</div>
  <div class="u-size2of12">Content</div>

<div class="u-flex u-flexAlignItemsCenter">
  <div class="u-size1of4">Content</div>
  <div class="u-size1of4">Content</div>
  <div class="u-sizeFill">Content</div>

Please refer to the README for SUIT CSS utils

Setting flex-shrink in IE10

In IE10 it is required to explicitly set flex-shrink on flex items, or use the longhand flex declaration.
In prior versions of utils-flex this was set automatically on all flex items. Due to issues with specificity this has been removed.
Should you need to apply the fix for IE10 then add a u-flexShrink class manually:
<div class="u-flex u-flexNoWrap">
  <div class="FlexItem u-flexShrink1">Content</div>
  <div class="FlexItem u-flexShrink1">Content</div>


Install Node (comes with npm).
npm install

To generate a build:
npm run build

To lint code with postcss-bem-linter and stylelint
npm run lint

To generate the testing build.
npm run build-test

To watch the files for making changes to test:
npm run watch

Basic visual tests are in test/index.html.

Browser support

Refer to the caniuse page for flexbox.
  • Google Chrome (latest)
  • Opera (latest)
  • Firefox 28+
  • Safari 6.1+
  • Internet Explorer 10+