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. 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="width=device-width, initial-scale=1.0">
  <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;
  min-height: 100vh;
}

.wrapper {
  min-height: 100vh;
  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.