Flexbox utilities for SUIT CSS
npm install suitcss-utils-flex
SUIT CSS flexbox utilities
* Read more about flexbox and its usage
* Read more about SUIT CSS's design principles.
* npm: npm install suitcss-utils-flex
* Download: zip
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 by align-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 of 0
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.
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.
`` html`
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:
`css`
@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);
` Some centred content html`
Note: The Grid component already sets display: flex on the root element.
` html`
Content
Content
Content
` html`
Content
Content
Content
` html`
Content
Content
Content
Please refer to the README for SUIT CSS utils
in IE10In 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:
`html`
Content
Content
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`.
Refer to the caniuse page for flexbox.
* Google Chrome (latest)
* Opera (latest)
* Firefox 28+
* Safari 6.1+
* Internet Explorer 10+