Flex Container

by rafi_sakib

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex Container</title>
</head>
<body>
<div id="container">
    <div id="main">
      <div id="left">
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
      </div>
      <div id="right"></div>
    </div>
    <div id="aside"></div>
  </div>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
}

#container {
  display: flex;
  height: 100%;
  background: red;
}

#main {
  flex-grow: 1;
  display: flex;
}

#left {
  width: 66.67%;
  background: blue;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.items {
  width: 100px;
  height: 50px;
  background: green;
}

#right {
  width: 33.33%;
  background: yellow;
}

#aside {
  width: 50px;
  background: grey;
}