suitcssSUIT CSS utilities: flex
SUIT CSS flexbox utilities
- Read more about flexbox and its usage
- Read more about SUIT CSS's design principles.
Installation
Available classes
flex-container
u-flex- Create a flex containeru-flexInline- Create an inline flex container
flex-direction
u-flexRow- Displays items in a rowu-flexRowReverse- Reverses items in a rowu-flexCol- Display items in a columnu-flexColReverse- Reverses items in a column
flex-wrap
u-flexWrap- Wrap items onto another line when space allowsu-flexNoWrap- Force items to stay on one lineu-flexWrapReverse- Wrap items and reverse direction
justify-content
u-flexJustifyStart- Align items at the start of the main axisu-flexJustifyEnd- Align items at the end of the main axisu-flexJustifyCenter- Align items at the center of the main axisu-flexJustifyBetween- Items have space between each other on main axisu-flexJustifyAround- Items have space around each other on main axis
align-items
u-flexAlignItemsStretch- Items stretch to fill containeru-flexAlignItemsStart- Cross-start margin edge of the items is placed on the cross-start lineu-flexAlignItemsEnd- Cross-end margin edge of the items is placed on the cross-end lineu-flexAlignItemsCenter- Items are centered in the cross-axisu-flexAlignItemsBaseline- Items have their baselines aligned on the cross axis
align-content
u-flexAlignContentStart- Items are packed to the start of the containeru-flexAlignContentEnd- Items are packed to the end of the containeru-flexAlignContentCenter- Items are packed to the centre of the containeru-flexAlignContentStretch- Lines stretch to take up the remaining spaceu-flexAlignContentBetween- Lines evenly distributed; first and last lines at container edgeu-flexAlignContentAround- Lines evenly distributed with equal space around each line
align-self
u-flexAlignSelfStart- Aligns single item at cross axis startu-flexAlignSelfEnd- Aligns single item at cross axis endu-flexAlignSelfCenter- Aligns single item at cross axis centre-u-flexAlignSelfStretch- Stretches single item from cross start to endu-flexAlignSelfAuto- Uses the default set byalign-items
order
u-flexOrderFirst- Positions an item at the startu-flexOrderLast- Positions an item at the endu-flexOrderNone- Sets item order to the default of0
flex-grow
u-flexGrowX- Specify how much the flex item will grow relatively
X can be any of the following numbers: 1, 2, 3, 4, 5.
flex-shrink
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.
flex-basis
Used to override other utilities and tweak how space is distributed.
u-flexBasisAutou-flexBasis0
flex shorthand
u-flexInitial- Sizes the item based on the width/height propertiesu-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 spaceu-flexExpandTop- Expand top margin to fill remaining spaceu-flexExpandRight- Expand right margin to fill remaining spaceu-flexExpandBottom- Expand bottom margin to fill remaining spaceu-flexExpandLeft- Expand left margin to fill remaining space
Read more about how this works.
Plugins
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 -->
</div>Configuration
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);Usage
Centring an element in its container
<div class="u-flex u-flexAlignItemsCenter u-flexJustifyCenter">
<p>Some centred content</p>
</div>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>
</div>Usage with utils-size
<div class="u-flex u-flexJustifyEnd">
<div class="u-size4of12">Content</div>
<div class="u-size2of12">Content</div>
<div>Content</div>
</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>
</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>
</div>Testing
Install Node (comes with npm).
npm installTo generate a build:
npm run buildTo lint code with postcss-bem-linter and stylelint
npm run lintTo generate the testing build.
npm run build-testTo watch the files for making changes to test:
npm run watchBasic 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+