npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@nitro-ui/utility-flex

v1.0.14

Published

Flex component for Nitro UI.

Downloads

201

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

ahmedalkhoudaryahmedalkhoudaryibrahimnaibrahimnaicarasia-engineeringicarasia-engineeringikramhakimiikramhakimiknzshiroxknzshiroxshyyawnshyyawnsllee_1004sllee_1004syaifulszsyaifulszzulazmanzulazman

Keywords

UtilityNitroUICSSComponentsiCarAsiaFlexFlexbox

Readme

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