Flex box intro – css finally fun to use

Flexbox is new style element in css that controls positioning, as of recently it has decent support in browsers ie. all modern browser are supporting it.

This maybe doesn’t sounds as huge as this thing is, but it is enormous! It removes need for floats and helps greatly with grid systems.

It actually allows positioning elements on the screen, aligning them both horizontally and vertically. This makes much easier to position and size elements, create layouts etc. Probably need for css grids is no longer as pressing. Main idea is to allow elements to be sized individually and let the container figure out how to position them.

W3 working draft for flexbox http://www.w3.org/TR/css3-flexbox/

I find this guide very helpful with visual examples:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Here are some things it solves and how to use it:

let’s make container new type ‘flex’

.container {display: flex; /* or inline-flex */
}

next we can say which way we want to lay out elements

.container {
     flex-direction: row | row-reverse | column | column-reverse;
}

you can specify how to wrap inside content

.container{
     flex-wrap: nowrap | wrap | wrap-reverse;
}

you can define that container can grow or shrink, which allows elements to take more space or shrink when needed.

.item {
    flex-grow: ; /* default 0 */
}

.item {
    flex-shrink: ; /* default 1 */
}

Next are very interesting interesting, it let’s us justify and align content and it is very powerful:

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

.container {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

There are more examples on how to do complete layout in CSS guide I linked before, also Mozilla described really well

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

Honestly from this perspective, I don’t see why we had to wait this much to solve this issue.

Advertisements