suitcss-utils-flex
v2.0.1
Published
Flexbox utilities for SUIT CSS
Downloads
8,179
Readme
SUIT 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-flexBasisAuto
u-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 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+