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

$3

.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