CSS Flexbox makes it easier to create flexible and responsive website layouts. It solves the common problem faced by UI/UX developers who attempt to arrange UI elements like buttons and text snippets side-by-side without having to use a grid CSS class.
The drawback of using grids in some cases is evident in the fact extremely smaller widths occupied by each UI element may not be achieved and one would have to define these grid widths for various screen sizes using classes like .col-lg-2, .col-sm-3, .col-md-4, etc.
With CSS flexbox, you can allocate a responsive width to various UI element without having to bother about screen size or defining specific width values. The elements will be allocated a dynamic width based on their parent container’s width.
Another great technique that should be adopted when using flexbox is the rule flex-grow: 1, which ensures that flex elements occupy the available space in their flex container.
Below is a link to sample code showing CSS flexbox in action: