Responsive Flexbox Layout With Main Content and a Side Bar | Layout Pattern-2

2 min readNov 7, 2023

This is the reference code for my youtube video Series on flexbox layout patterns.

Have a look at my channel and make sure you Subscribe
🚩 My Channel and Subscribe — http://bit.ly/3QnESnI

Here is the youtube Video (Will be available by 9th November 2023)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <div class="column-layout">
      <div class="main-content">
        <h1>Main content</h1>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod ac
        est vel facilisis. Nunc tincidunt id urna eget tincidunt. Phasellus
        volutpat lectus at mauris bibendum, ac blandit ex interdum. Nullam
        bibendum, justo eu sollicitudin pharetra, libero odio consequat ligula,
        non vehicula odio sapien nec tortor. Curabitur id urna nec…

Responsive Flexbox Layout With Main Content and a Side Bar | Layout Pattern-2

Written by Lanka Rathnayaka