The float and position property give us some flexibility to design a layout for our web pages. But, the position property is not suitable for responsive layouts. In case, the browser shrinks or expands, it is very difficult to maintain the position of elements as they shift to a different position. The floating elements have different problems as they overlap their containing element without warning on different browsers. It seems that breaking out of normal flow of HTML adds to complexity and issues that cannot be fixed easily.
To arrange elements in more flexible way, we have CSS flexbox , also known as flexible box layout. The flexbox is one dimensional model meaning you can layout flexbox items ( elements within the flexbox container) in any one direction. However, you can use multiple command to get a 2d layout like a grid. In this section, you will learn all CSS flexbox concepts in great detail with numerous examples.