Flex Layout Boilerplate HTML & CSS

Once again looking for a flex layout cheatsheet or example?

Yeah, been there done that.

Here’s the sample I made to have a boilerplate of a Flex Layout ready to be used for some sort of a admin website etc. Code has been tested on both desktop and mobile browsers.

Please note using the 100dvh CSS parameter for adjusting height of the flexbox.

Feel free to use it as a reference and please don’t mind the colours 🙂

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Flex</title>
  <link rel="stylesheet" href="flex.css">
</head>
<body>

<div class="wrapper">
  <div class="header">
    <a class="brand" href="">Brand</a>
    <a class="avatar" href="">
      <img src="https://www.gravatar.com/avatar/253a316324510bf0337286f89f8199fc "/>
    </a>
  </div>
  <div class="main">
    <div class="sidebar">left sidebar</div>
    <div class="content">
      <div class="page">content</div>
      <div class="extra">extra</div>
    </div>
    <div class="sidebar">right sidebar</div>
  </div>
  <div class="footer">
    <div class="details">details</div>
    <div class="copyright">&copy; 2023</div>
  </div>
</div>

</body>
</html>

CSS

html, body {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

.header {
  background: blue;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.header .brand {
  color: white;
}
.header .avatar {
  margin-left: auto;
  display: flex;
}
.header .avatar img {
  height: 32px;
  border-radius: 50%;
}

.main {
  background: lightgray;
  display: flex;
  flex-grow: 1;
  flex-direction: row;
}
.main .sidebar {
  background: green;
  width: 200px;
}
.main .content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.main .content .page {
  flex-grow: 1;
}
.main .content .extra {
  background: orange;
  height: 100px;
}

.footer {
  background: yellow;
  height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.footer .copyright {
  margin-left: auto;
}

Lukasz Cepowski

Hi! I'm the person behind Los Koderos. Tech stuff aside, love riding motorbikes, 4x4, offroading, exploring outdoors, cooking and tinkering with other DIY projects. Based in Krakow, Poland.