Flexbox

Most of the developers make use of CSS float and clearfix property to get a proper multi-column design layout. Developers still use these properties as they work and have great browser support among a variety of browsers. Sometimes you can run into issues like adding unnecessary containers, having absolute positioned children in relative positioned parents and using float in too many places. With Flexbox, developers can solve these design layout problems with a few lines of code.

Flexbox is a new design layout provided by CSS3 to offer more control to developers who want to build responsive layouts with relatively less code. It’s steady, simple to-utilize, and well-supported.

To start using the Flexbox model, you first need to define a flex container. The flex layout consists of a parent container referred to as the flex container and its next occurring children are called flex items. The flex container then become flexible by setting the display property to flex.

Example
.flex-container {
display: flex;
}

Bugs
Flexbox is not 100% error proof, it may contain some bugs and browser support issues. The best collections of them are is by Philip Walton and Greg Whitworth’s Flexbug. It’s an open source place to search for solutions to the issues that you are facing. This repository has a list of Flexbox issues and many cross-browser workarounds for them. The goal is that if you’re building a website using Flexbox and something isn’t working as you’d expect, you can find the solution here: https://github.com/philipwalton/flexbugs.

Conclusion
As a developer, I would prefer using Flexbox CSS where I can play with different flex properties and achieve complex design layout easily.

Reagan Fernandes