The Flexbox – and complex layout design
Complex grid layout has been one of the biggest hurdles on web design. First, we work with tables, but tables were not enough, they were inelegant code, hard to maintain. Then we started to see a paradigm shift towards the box model and the introduction of the cascade style sheets. After that, we started to use classes and ids to build what it seems complex layouts and position definitions to play with layers of elements. At this point, the CSS was enough adopted and we started to see a definition of pure CSS grid-like structures with defined math.
We divided the page into 10, 12 or 16 columns. We boxed our content in a specific width to match the grid that we chose to work on, and we calculate all the other sizes. Other web designers noticed and started to build frameworks, first just a small stylesheets. With the mobile revolution, we started to see full flagged frontend frameworks with a defined grid layout math.
But it would be nice if we could have a way to automatically calculate the space between elements base on the space available. This cannot be achieved with traditional float boxes and closed grids.
For that, the flexbox is the solution, and this is not widespread yet, but we all should embrace it; it’s modern, it’s clean and it’s what the whole frontend design should be.
Let’s start with an unordered list of elements:
We can create some boxes with the code below. On the first line we determined that our columns have 100px, but that is not enough to fill the container evenly. On the second line we used percentages to try to fill the whole space.
Things start to get complex when we add gutters:
Of course we can do the math and find the optimal results for the spaces and the width, also with pseudo elements we can remove the firts margin of the left and the last margin on the right to flush it to our content. But there is an easier way:
For this html markup we have the following css, please look how clean the code is and how easy we can implement different layouts:
Flexbox has a direction property, that can be vertical (column) and horizontal (row), on the exemples above we use the horizontal direction or row.
The wrap property will calculate the minimum amount of items that will fit in a row, you have three options for this:
The Flexbox Item
At this point, you can see that all the properties are applied to the Flexbox container. That is the main source of all goodness, while the items are just laid out inside of it. But there are several items properties that can change the layout in different ways.
For the item, the most difficult to understand properties are the ones that control the size of the content. I have laid down a code pen with the quick explanation of it:
You can control the content flow inside the item with flex-basis, using flex-basis: auto, the content will dictate the calculations, but using flex-basis: 0 the other properties will be controling the inner math of the items, check it out:
Where to go from here?
You just discovered the power of flexbox. Now complex layouts as navigation menus, top header bars got a lot easier now. Please take your time and test all the options available. Until next time.