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

postcss-flexbox

v1.0.3

Published

Flexbox layouts made easy with PostCSS

Downloads

1,129

Readme

postcss-flexbox

PostCSS Flexbox provides an easy to use option for using CSS3 Flexbox layouts. This is supported by IE 10+ and all evergreen browsers.

Installation

npm install postcss-flexbox

Dependencies

PostCSS Autoprefixer

Please add autoprefixer after postcss-flexbox. This will ensure all the appropriate vendor prefixes are added. Flexbox is not supported without these prefixes in some browsers yet. Please refer here for detailed information.

Usage

CSS3 Flexbox lets you set the layout for container divs: horizontal alignment of children or vertical. The children can in turn choose the space they occupy in the container and the alignment as well. Below are examples to show how this works. Here is a detailed blogpost I wrote on building using Flexbox in Coursera's tech blog

postcss-flexbox offers 2 props to set on a selector:

  1. box : This is to make a HTML element a flexbox Below are the values it can take. Please provide these values separated by a empty space. Provide a combination of these values and see the wonders of Flexbox working effortlessly.

    One of the following options is necessary to specify the direction of laying things out:

    1. horizontal
    2. horizontal-reverse
    3. vertical
    4. vertical-reverse

    Here are the rest of the options which will apply based on the direction:

    1. top
    2. bottom
    3. left
    4. right
    5. middle (vertical center)
    6. center (horizontal center)
    7. space-around
    8. space-between
    9. wrap
    10. wrap-reverse
  2. box-item : This is to align or adjust size of elements within a flexbox. Here are the list of options. Please specify them with a space between. You can provide the alignment option like top or right along with the size option like flex-1. Use a combination of these.

    1. top
    2. bottom
    3. right
    4. left
    5. middle
    6. center
    7. stretch
    8. flex-auto
    9. flex-1 ... flex-12
    10. flex-none

Horizontal box

.horizontal-box {
  box: horizontal;
}

HorizontalBox

Horizontal box + items centered

.horizontal-box.align-items-center {
   box: horizontal center;
}

Horizontal Box Items Centered

Horizontal box + items centered at the bottom

.horizontal-box.align-items-bottom-center {
   box: horizontal bottom center;
}

Horizontal Box Items Centered at Bottom

Horizontal box + items with space between

.horizontal-box.align-items-space-between {
  box: horizontal space-between;
}

Horizontal Box with space between

Horizontal box + space around items

.horizontal-box.align-items-space-around {
  box: horizontal space-around;
}

Horizontal Box with space around

Horizontal Box + align items bottom right

.horizontal-box.align-items-bottom-right {
  box: horizontal bottom right;
}

Horizontal Box with items in bottom right and items

Horizontal Box with items in the ratio 1:2:auto

.horizontal-box {
  box: horizontal;
}

.first {
  box-item: flex-1;
}

.second {
  box-item: flex-2;
}

Horizontal Box with items 1:2:auto

Horizontal Box : align items individually

.horizontal-box{
  box: horizontal;
}
.first, .second, .third, .fourth {
  box-item: flex-1;
}
.first {
  box-item: top;
}
.second {
  box-item: center;
}
.third {
  box-item: stretch;
}
.fourth {
  box-item: bottom;
}

Horizontal Box with items aligned individually

Horizontal box wrap items

.horizontal-box {
  box: horizontal wrap;
}

Horizontal Box with items wrapped for smaller widths

Vertical box with items in ratio auto:1:auto

.vertical-box {
  box: vertical;
}
.second {
  box-item: flex-1;
}

Vertical Box with items auto:1:auto

Vertical box with fullbleed item

.vertical-box {
  box: vertical;
}

.fullbleed {
  box-item: flex-1;
}

Vertical Box with one fullbleed item

[Changelog] (./CHANGELOG.md "Changelog")

License