CSS Flexbox – Create a website

CSS Flexbox – Create a website

In this video, I show you how to create a website layout with CSS Flexbox.
You can find the source code for this project below the video.


<!DOCTYPE html>
<html lang="en">
      <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1">
    <div class="container">

CSS Code

* {
  box-sizing: border-box;
body {
  margin: 0;
  padding: 0;
  background: #dfe6e9;
  font: 18px sans-serif;
header, footer {
  background: #ccc;
  padding: 25px;
  text-align: center;
  font: 30px "Indie Flower", cursive;
.container {
  display: flex;
  justify-content: space-around;
  margin: 40px 0;
nav, aside {
  flex-basis: 20%;
main {
  flex-basis: 50%;
nav, main, aside {
  height: 60vh; /* for demo only */ 
  background: #fcfcfc;
  padding: 20px;
  border-radius: 5px;
@media (max-width: 600px) {
  .container {
    flex-wrap: wrap;
  nav, main, aside {
    flex-basis: 95%;
    margin: 25px 10px;
  nav, aside {
    height: 100px;
Comments are closed.