As a consequence, you would need to set an equal height for all three columns to have the same length, or use some sort of hack. Moreover, the traditional way of doing things would present a well-known problem: every column is just as high as its content. Without flexbox, we’d probably float all the three elements, but making it work as desired wouldn’t be very straightforward. The first step is to place the elements within. To illustrate the various properties and possibilities, let’s assume the following simple layout for some of the demos in this article:

achieving equal-column layouts (irrespective of the amount of content inside each column) is a breeze.

items can “flex” their sizes to respond to the available space and can be aligned with respect to their container or each other.

bits of content can have their visual order reversed or rearranged.

page content can be laid out in any direction (to the left, to the right, downwards or even upwards).

(Admittedly, support for Grid has rapidly spread across most modern browsers, but support for flexbox is still wider, which is handy if you need your layouts to work in some of the slightly older browsers.) That said, flexbox can be used for full-page layouts, and thus provides a handy fallback for Grid layouts in browsers that don’t yet support Grid.

As a very general rule, the sweet spot for flexbox is layout in one dimension (say, a string of similar items), while Grid is ideal for layout in two dimensions (such as the elements of a whole page). While there is some overlap in what they can do, they each have very specific purposes and roles within CSS layout.

With the introduction of CSS Grid Layouts, you may be asking if flexbox is needed at all.

In this article, we provide a user-friendly introduction to flexbox. Flexbox (or the Flexible Box Layout Module) was the first of these dedicated layout modules, followed by CSS Grid Layout. In recent years, CSS layout has come of age, with dedicated tools for complex layouts replacing the various workarounds of using tables, floating, absolute positioning and so on.

Css flex alignment