utils-flex
utils-flex copied to clipboard
CSS flexbox utilities
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 container -
u-flexInline
- Create an inline flex container
flex-direction
-
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
flex-wrap
-
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
justify-content
-
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
align-items
-
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
align-content
-
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
align-self
-
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 byalign-items
order
-
u-flexOrderFirst
- Positions an item at the start -
u-flexOrderLast
- Positions an item at the end -
u-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 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.
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+