Nitro UI: Utility Flex

Utility Flex component for Nitro UI. Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

Getting Started

Get latest version by installing via NPM @nitro-ui/utility-flex:

npm install @nitro-ui/utility-flex

Enable Flex behaviors

To make the flexbox enable apply u-flex class to create a flexbox container and transform direct child elements into flex items.

Note that the modifier that applied to Flex parent there will be 2x dashed --. Note that the modifier that applied to Flex child there will be 2x underscore __.

<div class="u-flex">I am a flexbox container</div>

<div class="u-inline-flex">I am an inline flexbox container</div>

Responsive variations class also exist for display u-flex and u-inline-flex

.u-flex@desktop
.u-flex@portable
.u-flex@tablet
.u-flex@mobile

.u-inline-flex@desktop
.u-inline-flex@portable
.u-inline-flex@tablet
.u-inline-flex@mobile

Direction

Use .u-flex--row or u-direction-row to set a horizontal direction (the browser default), or .u-flex--row-reverse or u-direction-row-reverse to start the horizontal direction from the opposite side.

<div class="u-flex  u-flex--row">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="u-flex  u-flex--row-reverse">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Use .u-flex--column or .u-direction-column to set a vertical direction, or .u-flex--column-reverse or u-direction-column-reverse to start the vertical direction from the opposite side.

<div class="u-flex  u-flex--column">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="u-flex  u-flex--column-reverse">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>

Responsive variations also exist for flex direction.

.u-flex--row / .u-direction-row
.u-flex--row@desktop / .u-direction-row@desktop
.u-flex--row@portable / .u-direction-row@portable
.u-flex--row@tablet / .u-direction-row@tablet
.u-flex--row@mobile / .u-direction-row@mobile

.u-flex--row-reverse / .u-direction-row-reverse
.u-flex--row-reverse@desktop / .u-direction-row-reverse@desktop
.u-flex--row-reverse@portable / .u-direction-row-reverse@portable
.u-flex--row-reverse@tablet / .u-direction-row-reverse@tablet
.u-flex--row-reverse@mobile / .u-direction-row-reverse@mobile

.u-flex--column / .u-direction-column
.u-flex--column@desktop / .u-direction-column@desktop
.u-flex--column@portable / .u-direction-column@portable
.u-flex--column@tablet / .u-direction-column@tablet
.u-flex--column@mobile / .u-direction-column@mobile

.u-flex--column-reverse / .u-direction-column-reverse
.u-flex--column-reverse@desktop / .u-direction-column-reverse@desktop
.u-flex--column-reverse@portable / .u-direction-column-reverse@portable
.u-flex--column-reverse@tablet / .u-direction-column-reverse@tablet
.u-flex--column-reverse@mobile / .u-direction-column-reverse@mobile

Wrap

Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .u-flex--nowrap or .u-nowrap, wrapping with .u-flex--wrap or u-wrap, or reverse wrapping with .u-flex--wrap-reverse or u-wrap-reverse.

<div class="u-flex  u-flex--nowrap">
    ...
</div>
<div class="u-flex  u-flex--wrap">
    ...
</div>
<div class="u-flex  u-flex--wrap-reverse">
    ...
</div>

or

<div class="u-flex  u-nowrap">
    ...
</div>
<div class="u-flex  u-wrap">
    ...
</div>
<div class="u-flex  u-wrap-reverse">
    ...
</div>

Responsive variations also exist for flex-wrap.

.u-flex--nowrap / .u-nowrap
.u-flex--nowrap@desktop / .u-nowrap@desktop
.u-flex--nowrap@portable / .u-nowrap@portable
.u-flex--nowrap@tablet / .u-nowrap@tablet
.u-flex--nowrap@mobile / .u-nowrap@mobile

.u-flex--wrap / .u-wrap
.u-flex--wrap@desktop / .u-wrap@desktop
.u-flex--wrap@portable / .u-wrap@portable
.u-flex--wrap@tablet / .u-wrap@tablet
.u-flex--wrap@mobile / .u-wrap@mobile

.u-flex--wrap-reverse / .u-wrap-reverse
.u-flex--wrap-reverse@desktop / .u-wrap-reverse@desktop
.u-flex--wrap-reverse@portable / .u-wrap-reverse@portable
.u-flex--wrap-reverse@tablet / .u-wrap-reverse@tablet
.u-flex--wrap-reverse@mobile / .u-wrap-reverse@mobile

Justify content

Use u-flex--justify utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, around or evenly.

<div class="u-flex  u-flex--justify-start">...</div>
<div class="u-flex  u-flex--justify-end">...</div>
<div class="u-flex  u-flex--justify-center">...</div>
<div class="u-flex  u-flex--justify-between">...</div>
<div class="u-flex  u-flex--justify-around">...</div>

or

<div class="u-flex  u-justify-start">...</div>
<div class="u-flex  u-justify-end">...</div>
<div class="u-flex  u-justify-center">...</div>
<div class="u-flex  u-justify-between">...</div>
<div class="u-flex  u-justify-around">...</div>

Responsive variations also exist for u-flex--justify.

.u-flex--justify-start / .u-justify-content-start
.u-flex--justify-start@desktop / .u-justify-content-start@desktop
.u-flex--justify-start@portable / .u-justify-content-start@portable
.u-flex--justify-start@tablet / .u-justify-content-start@tablet
.u-flex--justify-start@mobile / .u-justify-content-start@mobile

.u-flex--justify-end / .u-direction-justify-end
.u-flex--justify-end@desktop / .u-justify-content-end@desktop
.u-flex--justify-end@portable / .u-justify-content-end@portable
.u-flex--justify-end@tablet / .u-justify-content-end@tablet
.u-flex--justify-end@mobile / .u-justify-content-end@mobile

.u-flex--justify-center / .u-justify-content-center
.u-flex--justify-center@desktop / .u-justify-content-center@desktop
.u-flex--justify-center@portable / .u-justify-content-center@portable
.u-flex--justify-center@tablet / .u-justify-content-center@tablet
.u-flex--justify-center@mobile / .u-justify-content-center@mobile

.u-flex--justify-between / .u-justify-content-between
.u-flex--justify-between@desktop / .u-justify-content-between@desktop
.u-flex--justify-between@portable / .u-justify-content-between@portable
.u-flex--justify-between@tablet / .u-justify-content-between@tablet
.u-flex--justify-between@mobile / .u-justify-content-between@mobile

.u-flex--justify-around / .u-justify-content-around
.u-flex--justify-around@desktop / .u-justify-content-around@desktop
.u-flex--justify-around@portable / .u-justify-content-around@portable
.u-flex--justify-around@tablet / .u-justify-content-around@tablet
.u-flex--justify-around@mobile / .u-justify-content-around@mobile

.u-flex--justify-evenly / .u-justify-content-evenly
.u-flex--justify-evenly@desktop / .u-justify-content-evenly@desktop
.u-flex--justify-evenly@portable / .u-justify-content-evenly@portable
.u-flex--justify-evenly@tablet / .u-justify-content-evenly@tablet
.u-flex--justify-evenly@mobile / .u-justify-content-evenly@mobile

Align items

Use u-flex--items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from start, end, center, baseline, or stretch (browser default).

<div class="u-flex  u-flex--items-start">...</div>
<div class="u-flex  u-flex--items-end">...</div>
<div class="u-flex  u-flex--items-center">...</div>
<div class="u-flex  u-flex--items-baseline">...</div>
<div class="u-flex  u-flex--items-stretch">...</div>

or

<div class="u-flex  u-align-items-start">...</div>
<div class="u-flex  u-align-items-end">...</div>
<div class="u-flex  u-align-items-center">...</div>
<div class="u-flex  u-align-items-baseline">...</div>
<div class="u-flex  u-align-items-stretch">...</div>

Responsive variations also exist for u-flex--items.

.u-flex--items-start / .u-align-items-start
.u-flex--items-start@desktop / .u-align-items-start@desktop
.u-flex--items-start@portable / .u-align-items-start@portable
.u-flex--items-start@tablet / .u-align-items-start@tablet
.u-flex--items-start@mobile / .u-align-items-start@mobile

.u-flex--items-end / .u-align-items-end
.u-flex--items-end@desktop / .u-align-items-end@desktop
.u-flex--items-end@portable / .u-align-items-end@portable
.u-flex--items-end@tablet / .u-align-items-end@tablet
.u-flex--items-end@mobile / .u-align-items-end@mobile

.u-flex--items-center / .u-align-items-center
.u-flex--items-center@desktop / .u-align-items-center@desktop
.u-flex--items-center@portable / .u-align-items-center@portable
.u-flex--items-center@tablet / .u-align-items-center@tablet
.u-flex--items-center@mobile / .u-align-items-center@mobile

.u-flex--items-baseline / .u-align-items-baseline
.u-flex--items-baseline@desktop / .u-align-items-baseline@desktop
.u-flex--items-baseline@portable / .u-align-items-baseline@portable
.u-flex--items-baseline@tablet / .u-align-items-baseline@tablet
.u-flex--items-baseline@mobile / .u-align-items-baseline@mobile

.u-flex--items-stretch / .u-align-items-stretch
.u-flex--items-stretch@desktop / .u-align-items-stretch@desktop
.u-flex--items-stretch@portable / .u-align-items-stretch@portable
.u-flex--items-stretch@tablet / .u-align-items-stretch@tablet
.u-flex--items-stretch@mobile / .u-align-items-stretch@mobile

Align content

Use u-flex--content-* or u-align-content-* utilities on flexbox containers to align flex items together on the cross axis. Choose * from start (browser default), end, center, between, around, or stretch. In order to see it, require flex-wrap: wrap; and increase the number of flex items.

Heads up! This property has no effect on single rows of flex items.

<div class="u-flex u-flex--content-start  u-flex--wrap">
  ...
</div>

<div class="u-flex u-flex--content-end  u-flex--wrap">
  ...
</div>

<div class="u-flex u-flex--content-center  u-flex--wrap">
  ...
</div>

<div class="u-flex u-flex--content-between  u-flex--wrap">
  ...
</div>

<div class="u-flex u-flex--content-around  u-flex--wrap">
  ...
</div>

<div class="u-flex u-flex--content-stretch  u-flex--wrap">
  ...
</div>

or

<div class="u-flex u-align-content-start  u-flex--wrap">
  ...
</div>

<div class="u-flex u-align-content-end  u-flex--wrap">
  ...
</div>

<div class="u-flex u-align-content-center  u-flex--wrap">
  ...
</div>

<div class="u-flex u-align-content-between  u-flex--wrap">
  ...
</div>

<div class="u-flex u-align-content-around  u-flex--wrap">
  ...
</div>

<div class="u-flex u-align-content-stretch  u-flex--wrap">
  ...
</div>

Flex Child items utilities

Align self

Use u-flex__self utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column). Choose from the same options as align-items: auto, start, end, center, baseline, or stretch (browser default). Align self is a utilities class that apply to the Flex children thus the class modifier will be using __

The implementations

<div class="u-flex">
    <div class="u-flex__self-end">Aligned end self</div>
</div>

<div class="u-flex__self-auto">...</div>
<div class="u-flex__self-start">...</div>
<div class="u-flex__self-end">...</div>
<div class="u-flex__self-center">...</div>
<div class="u-flex__self-baseline">...</div>
<div class="u-flex__self-stretch">...</div>

or

<div class="u-self-auto">...</div>
<div class="u-self-start">...</div>
<div class="u-self-end">...</div>
<div class="u-self-center">...</div>
<div class="u-self-baseline">...</div>
<div class="u-self-stretch">...</div>

Responsive variations also exist for u-flex__self.

.u-flex__self-auto / .u-self-auto
.u-flex__self-auto@desktop / .u-self-auto@desktop
.u-flex__self-auto@portable / .u-self-auto@portable
.u-flex__self-auto@tablet / .u-self-auto@tablet
.u-flex__self-auto@mobile / .u-self-auto@mobile

.u-flex__self-start / .u-self-start
.u-flex__self-start@desktop / .u-self-start@desktop
.u-flex__self-start@portable / .u-self-start@portable
.u-flex__self-start@tablet / .u-self-start@tablet
.u-flex__self-start@mobile / .u-self-start@mobile

.u-flex__self-end / .u-self-end
.u-flex__self-end@desktop / .u-self-end@desktop
.u-flex__self-end@portable / .u-self-end@portable
.u-flex__self-end@tablet / .u-self-end@tablet
.u-flex__self-end@mobile / .u-self-end@mobile

.u-flex__self-center / .u-self-center
.u-flex__self-center@desktop / .u-self-center@desktop
.u-flex__self-center@portable / .u-self-center@portable
.u-flex__self-center@tablet / .u-self-center@tablet
.u-flex__self-center@mobile / .u-self-center@mobile

.u-flex__self-baseline / .u-self-baseline
.u-flex__self-baseline@desktop / .u-self-baseline@desktop
.u-flex__self-baseline@portable / .u-self-baseline@portable
.u-flex__self-baseline@tablet / .u-self-baseline@tablet
.u-flex__self-baseline@mobile / .u-self-baseline@mobile

.u-flex__self-stretch / .u-self-stretch
.u-flex__self-stretch@desktop / .u-self-stretch@desktop
.u-flex__self-stretch@portable / .u-self-stretch@portable
.u-flex__self-stretch@tablet / .u-self-stretch@tablet
.u-flex__self-stretch@mobile / .u-self-stretch@mobile

Fill

Use the .u-flex__fill or u-fill class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.

<div class="u-flex bd-highlight">
  <div class="u-flex__fill">Flex item with a lot of content</div>
  <div class="u-flex__fill">Flex item</div>
  <div class="u-flex__fill">Flex item</div>
</div>

Responsive variations also exist for u-flex__fill.

.u-flex__fill / .u-fill
.u-flex__fill@desktop / .u-fill@desktop
.u-flex__fill@portable / .u-fill@portable
.u-flex__fill@tablet / .u-fill@tablet
.u-flex__fill@mobile / .u-fill@mobile

Grow and shrink

Use .u-flex__grow-* or u-grow-* utilities to toggle a flex item’s ability to grow to fill available space. In the example of 3 flex items, using .u-flex__grow-1 elements for one item will take all available space it can while allowing the remaining two flex items their necessary space. Using u-flex__grow-1 to all child elements will grow the width evenly. Available option is 1 and 0.

<div class="u-flex">
    <div class="u-flex__grow-1">Flex item</div>
    <div>Flex item</div>
    <div>Third flex item</div>
</div>

or

<div class="u-flex">
  <div class="u-grow-1">Flex item</div>
  <div>Flex item</div>
  <div>Third flex item</div>
</div>

Use .u-flex__shrink-* or u-shrink-* utilities to toggle a flex item’s ability to shrink if necessary.

<div class="u-flex">
    <div class="u-width-1">Flex item</div>
    <div class="u-flex__shrink-1">Flex item</div>  
</div>

or

<div class="u-flex">
    <div class="u-width-1">Flex item</div>
    <div class="u-shrink-1">Flex item</div>  
</div>

Responsive variations also exist for u-flex__grow and u-flex__shrink.

.u-flex__{grow|shrink}-1 / .u-{grow|shrink}-1
.u-flex__{grow|shrink}-1@desktop / .u-{grow|shrink}-1@desktop
.u-flex__{grow|shrink}-1@portable / .u-{grow|shrink}-1@portable
.u-flex__{grow|shrink}-1@tablet / .u-{grow|shrink}-1@tablet
.u-flex__{grow|shrink}-1@mobile / .u-{grow|shrink}-1@mobile

.u-flex__{grow|shrink}-0 / .u-{grow|shrink}-0
.u-flex__{grow|shrink}-0@desktop / .u-{grow|shrink}-0@desktop
.u-flex__{grow|shrink}-0@portable / .u-{grow|shrink}-0@portable
.u-flex__{grow|shrink}-0@tablet / .u-{grow|shrink}-0@tablet
.u-flex__{grow|shrink}-0@mobile / .u-{grow|shrink}-0@mobile

Auto Margins

Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. For more available properties for Nitro auto margins can check out auto margins and it supports responsive too.

Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default justify-content value. See this StackOverflow answer for more details.

<div class="u-flex">
  <div class="u-margin-right-auto">Flex item</div>
  <div>Flex item</div>
  <div>Flex item</div>
</div>

Order

Change the visual order of specific flex items with a handful of order utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As order takes any integer value (e.g., 5), add custom CSS for any additional values needed. Choose from 0 to 12 or first and last.

<div class="u-flex  u-flex--nowrap">
  <div class="u-order-3">First flex item</div>
  <div class="u-order-2">Second flex item</div>
  <div class="u-order-1">Third flex item</div>
</div>

Responsive variations also exist for order.

.u-order-first
.u-order-last
.u-order-1
.u-order-2
.u-order-3
.u-order-4
.u-order-5
.u-order-6
.u-order-7
.u-order-8
.u-order-9
.u-order-10
.u-order-11
.u-order-12

.u-order-first@desktop
.u-order-last@desktop
.u-order-1@desktop
.u-order-2@desktop
.u-order-3@desktop
.u-order-4@desktop
.u-order-5@desktop
.u-order-6@desktop
.u-order-7@desktop
.u-order-8@desktop
.u-order-9@desktop
.u-order-10@desktop
.u-order-11@desktop
.u-order-12@desktop

.u-order-first@portable
.u-order-last@portable
.u-order-1@portable
.u-order-2@portable
.u-order-3@portable
.u-order-4@portable
.u-order-5@portable
.u-order-6@portable
.u-order-7@portable
.u-order-8@portable
.u-order-9@portable
.u-order-10@portable
.u-order-11@portable
.u-order-12@portable

.u-order-first@tablet
.u-order-last@tablet
.u-order-1@tablet
.u-order-2@tablet
.u-order-3@tablet
.u-order-4@tablet
.u-order-5@tablet
.u-order-6@tablet
.u-order-7@tablet
.u-order-8@tablet
.u-order-9@tablet
.u-order-10@tablet
.u-order-11@tablet
.u-order-12@tablet

.u-order-first@mobile
.u-order-last@mobile
.u-order-1@mobile
.u-order-2@mobile
.u-order-3@mobile
.u-order-4@mobile
.u-order-5@mobile
.u-order-6@mobile
.u-order-7@mobile
.u-order-8@mobile
.u-order-9@mobile
.u-order-10@mobile
.u-order-11@mobile
.u-order-12@mobile

Development

To extends, develop or contribute to this component, you're required to fork our main repository and made a pull request.

Development Requirements

Development tools required for this component are:

• NodeJS
• Grunt CLI
• Ruby (optional)
• SASS (optional)

Ruby and SASS are optional if you're fully using node-sass from npm for development.

Development Setup

Run:

npm install

Compile

Run:

grunt

---

TODO

Nothing todo for now.

---

CHANGELOG

All notable changes to this project will be documented in this file. For now, let's keep TODO and CHANGELOG in README file. Keeping things simple.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[0.0.0-beta] - 2019-08-23

Added

• Initial setup for spacing