@PrasAbdilah: Learn Flexbox

CSS Flexible Box or Flexbox is simply a CSS layout model.
Using flexbox we do not need to rely on float anymore, and it could be responsive too.

I think flexbox will be used widely in the future, so we better start to learn now.
Anyway, flexbox is very cool and we must learn it, definitely.

http://www.w3.org/TR/css3-flexbox/
How about the browser compatibility? Check this out.
http://caniuse.com/#feat=flexbox

1. Flex container

This is what happened if we add display: flex to the container.

See the Pen 1. Flexbox Container, display: flex by pras abdilah (@pras-abdilah) on CodePen.

2. Flexbox width

- Flex-grow

We could adjust the item width using flex-basis property, and to make them fluid to the container we will make use of flex-grow and flex-shrink.

See the Pen 2. Flexbox width part 1, flexbox-grow; by pras abdilah (@pras-abdilah) on CodePen.

- Flex-shrink

What if the total of flex-basis value is bigger than the container width? In this case we could use flex-shrink property.

See the Pen 3. Flexbox width, flex-shrink by pras abdilah (@pras-abdilah) on CodePen.

We could use both flex-grow and flex-shrink in the same element, so whether it will grow or shrink it will depend on the container width.

- Shorthand

* The 1st parameter is flex-grow;
* The 2nd parameter is flex-shrink;
* The 3th parameter is flex-basis;

See the Pen 4. Flexbox - width shorthand 1 by pras abdilah (@pras-abdilah) on CodePen.

Other Example:

See the Pen QwbWBz by pras abdilah (@pras-abdilah) on CodePen.

Item1 will be 2 times as wide as the rest.

3. Ordering and Orientation

- Flex-direction

Flex-direction property is applied to the container. By default, the value is row, so in the examples above you could add "flex-direction : row;" and nothing will change.

The other value of this property is "column", and as you might already guessed, it will arrange vertically.
The height of the items will distribute the same way as the width was before using the flex property.

See the Pen 6. Flexbox, flex-direction by pras abdilah (@pras-abdilah) on CodePen.

We could also use "column-reverse" or "row-reverse" and the order of the items will be reversed.

- Wrapping the content using flex-wrap

There are 3 value we could use in flex-wrap property. They are "nowrap", "wrap", and "wrap-reverse". By default, the value is "nowrap".

See the Pen Flex-Wrap by pras abdilah (@pras-abdilah) on CodePen.

- Flex-flow, a flex-direction and flex-wrap shorthand

The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties.
The first value is for flex-direction, and the second is flex-wrap.

See the Pen Flex-flow by pras abdilah (@pras-abdilah) on CodePen.

- Ordering the content

Flex items are, by default, displayed and laid out in the same order as they appear in the source document. The order property can be used to change this ordering.

See the Pen 7. Ordering Flexbox content by pras abdilah (@pras-abdilah) on CodePen.

This property has no effect on boxes that are not children of a flex container.

4. Cross-axis Alignment

Conclusion

Maybe it seems confusing at first, but by keep practicing, I'm sure Flexbox will be very useful.
In the future, I think flexbox will widely used.

@PrasAbdilah

Monday, 24 November 2014

Learn Flexbox