The simplest and most detailed CSS flex-box layout tutorial
Tags: css, flexbox, layout, tutorial
Published: 2021-01-20 22:45:15

---
title: The simplest and most detailed CSS flex-box layout tutorial
published: true
description: I am now working on a web app prototype and need a panel-like full-screen layout for it.
tags: css, flexbox, layout, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/uvraofbblu4vu1i6t273.png
---

Hi folks,
Hope you find this small tutorial useful.

<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">I am now working on a web app prototype and need a panel-like full-screen layout for it. <br><br>My first intention was to look into React component libraries but that&#39;s actually an overkill.<br><br>Let&#39;s see how to create a simple layout like that with pure CSS and flex-box.<br><br>1/ <a href="https://t.co/agTGAX1dmr">pic.twitter.com/agTGAX1dmr</a></p>&mdash; Oleg GROMOV (@oleggromov) <a href="https://twitter.com/oleggromov/status/1352015700982980608?ref_src=twsrc%5Etfw">January 20, 2021</a></blockquote>

<blockquote class="twitter-tweet" data-conversation="none" data-dnt="true"><p lang="en" dir="ltr">First, let&#39;s do basic HTML. We&#39;ll keep it as simple as possible and also use semantic HTML5 elements.<br><br>Although completely irrelevant when you make a web app and not a content site to be indexed by search engines, it&#39;s still good practice to add semantics to your markup.<br><br>2/ <a href="https://t.co/VsqVxjM6uF">pic.twitter.com/VsqVxjM6uF</a></p>&mdash; Oleg GROMOV (@oleggromov) <a href="https://twitter.com/oleggromov/status/1352015707001806854?ref_src=twsrc%5Etfw">January 20, 2021</a></blockquote>

<blockquote class="twitter-tweet" data-conversation="none" data-dnt="true"><p lang="en" dir="ltr">Let&#39;s go over the need for each element.<br><br>Layout is needed to fill viewport vertically.<br><br>&lt;header&gt; and &lt;main&gt; designate corresponding layout areas.<br><br>&lt;aside&gt; and &lt;section&gt;s all mean columns, although aside gets additional touch of exclusivity.<br><br>Ignore contents though 😜<br><br>3/</p>&mdash; Oleg GROMOV (@oleggromov) <a href="https://twitter.com/oleggromov/status/1352015709262532611?ref_src=twsrc%5Etfw">January 20, 2021</a></blockquote>

<blockquote class="twitter-tweet" data-conversation="none" data-dnt="true"><p lang="en" dir="ltr">With only background styling it looks something like this.<br><br>Let&#39;s continue with CSS step-by-step.<br><br>4/ <a href="https://t.co/5OpAsBFYhS">pic.twitter.com/5OpAsBFYhS</a></p>&mdash; Oleg GROMOV (@oleggromov) <a href="https://twitter.com/oleggromov/status/1352015711795900420?ref_src=twsrc%5Etfw">January 20, 2021</a></blockquote>

<blockquote class="twitter-tweet" data-conversation="none" data-dnt="true"><p lang="en" dir="ltr">We need to stretch our outermost body and html elements to 100% of height initially with the according property . Note that it won&#39;t make elements cut content if you go over the height limit. <br><br>Also let&#39;s set margin: 0 so that we don&#39;t have any annoying paddings at the edges.<br><br>5/ <a href="https://t.co/0VBQSdAhWP">pic.twitter.com/0VBQSdAhWP</a></p>&mdash; Oleg GROMOV (@oleggromov) <a href="https://twitter.com/oleggromov/status/1352015716887752708?ref_src=twsrc%5Etfw">January 20, 2021</a></blockquote>

<blockquote class="twitter-tweet" data-conversation="none" data-dnt="true"><p lang="en" dir="ltr">Now let&#39;s nudge our div.layout into being a good container for the future columns.<br><br>For that, we&#39;ll make it display: flex, set flex-direction and 100% height. <br><br>You see that the annoying green flooded entire screen, meaning that layout has stretched but not the columns yet. <br><br>6/ <a href="https://t.co/a7FsYYyA1m">pic.twitter.com/a7FsYYyA1m</a></p>&mdash; Oleg GROMOV (@oleggromov) <a href="https://twitter.com/oleggromov/status/1352015719655825411?ref_src=twsrc%5Etfw">January 20, 2021</a></blockquote>

<blockquote class="twitter-tweet" data-conversation="none" data-dnt="true"><p lang="en" dir="ltr">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&#39;s make all panels have equal padding of 12px.<br><br>It&#39;s not the best for a11y to use pixels, but we&#39;re playing here, right?<br><br>7/ <a href="https://t.co/cLxjstP2m2">pic.twitter.com/cLxjstP2m2</a></p>&mdash; Oleg GROMOV (@oleggromov) <a href="https://twitter.com/oleggromov/status/1352015727839096832?ref_src=twsrc%5Etfw">January 20, 2021</a></blockquote>

<blockquote class="twitter-tweet" data-conversation="none" data-dnt="true"><p lang="en" dir="ltr">Next let&#39;s make them stretch. For that, we need to add `flex: 1` rule to .panel. It&#39;s a shorthand, check out this tutorial to learn more <a href="https://t.co/LaFqABmLlU">https://t.co/LaFqABmLlU</a><br><br>Meanwhile, panels stretched to fill the screen but not in the way I wanted. Fixing it next step.<br><br>8/ <a href="https://t.co/L9dT2YhkIR">pic.twitter.com/L9dT2YhkIR</a></p>&mdash; Oleg GROMOV (@oleggromov) <a href="https://twitter.com/oleggromov/status/1352015733610450944?ref_src=twsrc%5Etfw">January 20, 2021</a></blockquote>

<blockquote class="twitter-tweet" data-conversation="none" data-dnt="true"><p lang="en" dir="ltr">There&#39;s flex-grow and flex-shrink in addition to usual width, min-, and max-width properties to control size of flex-ed boxes.<br><br>Using flex-grow (its shorthand flex) and setting .columns { flex: 100 } we make them attempt take 100x more space than another flex child. <br><br>9/</p>&mdash; Oleg GROMOV (@oleggromov) <a href="https://twitter.com/oleggromov/status/1352015736294813701?ref_src=twsrc%5Etfw">January 20, 2021</a></blockquote>

<blockquote class="twitter-tweet" data-conversation="none" data-dnt="true"><p lang="en" dir="ltr">Another child, &lt;header&gt;, inherited its flex: 1 from .panel that I conveniently set in one of the previous steps. <br><br>At this point we have almost entirely working layout without one simple thing: width restriction for the aside.<br><br>To have it, let&#39;s add max-width: 16em to it.<br><br>10/ <a href="https://t.co/fovYEft1R7">pic.twitter.com/fovYEft1R7</a></p>&mdash; Oleg GROMOV (@oleggromov) <a href="https://twitter.com/oleggromov/status/1352015741382496257?ref_src=twsrc%5Etfw">January 20, 2021</a></blockquote>

<blockquote class="twitter-tweet" data-conversation="none" data-dnt="true"><p lang="en" dir="ltr">So now we have a layout that:<br>- fills entire viewport <br>- accommodates as many columns as needed<br>- is super simple, pure CSS<br><br>You can grab the code and play with it here: <a href="https://t.co/O4W1CxuBEO">https://t.co/O4W1CxuBEO</a><br><br>Was this useful? Let me know in comments. Good luck hacking your CSS! 🤘<br><br>11/ <a href="https://t.co/dxkrRNDQ1k">pic.twitter.com/dxkrRNDQ1k</a></p>&mdash; Oleg GROMOV (@oleggromov) <a href="https://twitter.com/oleggromov/status/1352015803160391684?ref_src=twsrc%5Etfw">January 20, 2021</a></blockquote>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>