The simplest and most detailed CSS flex-box layout tutorial

Hi folks,
Hope you find this small tutorial useful.

I am now working on a web app prototype and need a panel-like full-screen layout for it.

My first intention was to look into React component libraries but that's actually an overkill.

Let's see how to create a simple layout like that with pure CSS and flex-box.

1/ pic.twitter.com/agTGAX1dmr

— Oleg GROMOV (@oleggromov) January 20, 2021

First, let's do basic HTML. We'll keep it as simple as possible and also use semantic HTML5 elements.

Although completely irrelevant when you make a web app and not a content site to be indexed by search engines, it's still good practice to add semantics to your markup.

2/ pic.twitter.com/VsqVxjM6uF

— Oleg GROMOV (@oleggromov) January 20, 2021

Let's go over the need for each element.

Layout is needed to fill viewport vertically.

<header> and <main> designate corresponding layout areas.

<aside> and <section>s all mean columns, although aside gets additional touch of exclusivity.

Ignore contents though 😜

3/

— Oleg GROMOV (@oleggromov) January 20, 2021

With only background styling it looks something like this.

Let's continue with CSS step-by-step.

4/ pic.twitter.com/5OpAsBFYhS

— Oleg GROMOV (@oleggromov) January 20, 2021

We need to stretch our outermost body and html elements to 100% of height initially with the according property . Note that it won't make elements cut content if you go over the height limit.

Also let's set margin: 0 so that we don't have any annoying paddings at the edges.

5/ pic.twitter.com/0VBQSdAhWP

— Oleg GROMOV (@oleggromov) January 20, 2021

Now let's nudge our div.layout into being a good container for the future columns.

For that, we'll make it display: flex, set flex-direction and 100% height.

You see that the annoying green flooded entire screen, meaning that layout has stretched but not the columns yet.

6/ pic.twitter.com/a7FsYYyA1m

— Oleg GROMOV (@oleggromov) January 20, 2021

Remember `panel` classes I set to header, aside, and section-s? This was no mistake. Panel is an important UI concept I want to have in my vocabulary. Let's make all panels have equal padding of 12px.

It's not the best for a11y to use pixels, but we're playing here, right?

7/ pic.twitter.com/cLxjstP2m2

— Oleg GROMOV (@oleggromov) January 20, 2021

Next let's make them stretch. For that, we need to add `flex: 1` rule to .panel. It's a shorthand, check out this tutorial to learn more https://t.co/LaFqABmLlU

Meanwhile, panels stretched to fill the screen but not in the way I wanted. Fixing it next step.

8/ pic.twitter.com/L9dT2YhkIR

— Oleg GROMOV (@oleggromov) January 20, 2021

There's flex-grow and flex-shrink in addition to usual width, min-, and max-width properties to control size of flex-ed boxes.

Using flex-grow (its shorthand flex) and setting .columns { flex: 100 } we make them attempt take 100x more space than another flex child.

9/

— Oleg GROMOV (@oleggromov) January 20, 2021

Another child, <header>, inherited its flex: 1 from .panel that I conveniently set in one of the previous steps.

At this point we have almost entirely working layout without one simple thing: width restriction for the aside.

To have it, let's add max-width: 16em to it.

10/ pic.twitter.com/fovYEft1R7

— Oleg GROMOV (@oleggromov) January 20, 2021

So now we have a layout that:
- fills entire viewport
- accommodates as many columns as needed
- is super simple, pure CSS

You can grab the code and play with it here: https://t.co/O4W1CxuBEO

Was this useful? Let me know in comments. Good luck hacking your CSS! 🤘

11/ pic.twitter.com/dxkrRNDQ1k

— Oleg GROMOV (@oleggromov) January 20, 2021