Negligent Pachinko Machine

    @nitro-ui/utility-flex

    1.0.14 • Public • Published

    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:

    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

    Install

    npm i @nitro-ui/utility-flex

    DownloadsWeekly Downloads

    6

    Version

    1.0.14

    License

    ISC

    Unpacked Size

    111 kB

    Total Files

    10

    Last publish

    Collaborators

    • ahmedalkhoudary
    • ibrahimna
    • icarasia-engineering
    • ikramhakimi
    • knzshirox
    • shyyawn
    • sllee_1004
    • syaifulsz
    • zulazman