Flexbox is the Future

Flexbox is a relatively new addition to the CSS family. It is a way for designers to get away from using properties like float and clear, as well as display: block or inline-block. By using display: flex or inline-flex you remove the need to use floats and margins to appropriately position your site elements. Take this section for example, it was written completely with flexbox in mind and doesn't use any floats or positions.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.

Columns and Rows

Flexbox is not only a way of "floating" your material, but it also allows you to designate an orientation to your work. The way I think of flexbox is taking the concept of Bootstrap with it's even column layout and giving it direction. Up and Down, or Left and Right. Whichever you need for your layout.

1

2

3

1

2

3

4

1

2

3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.

Spacing

Typically you would have to float objects and use padding/margins to space them how you wanted. Using flexbox also give you the option of how you want your content positioned relative to one another. This works for both horizontal and vertical layouts.

1

2

3

1

2

3

Positioning

Another option flexbox gives you is the ability to position your "floats" where you want them. This can be at the start of a section, the end, bottom, top or what have you. No need for position relative/absolute to get the general look you want! As with spacing, this works for both horizontal and vertical layouts.