In short, flexbox layout is based on a direction – either horizontal or vertical (flex-flow direction) and its purpose is to align flex items in a flex container. Compared to block which is vertically-based and inline which is horizontally-based, and they work pretty well for pages, it is also important to bring out they have a flexibility problem and cannot hold up complex applications, especially when it comes to responsive design that deals with lots of orientation changing, stretching and shrinking. So, you think flexbox solves all that? Not really. Flexbox does not deal well with the complexity of big-scale layouts. Grid does. At the end of the day, grid is two-dimensional and the flexbox is one-dimensional. We talked about that and other differences in an article about Grid vs. flexbox in CSS: how are they different and when should we use them?. However, flexbox is still an appropriate approach for small-scale layouts and parts of an application and its goal is to enable a more flexible layout, in terms of aligning and distributing space among flex items in a flex container.
…