CSS - Responsive flexbox

Quiz
Description

We can design a flexible responsive website using Flexbox. The website contains a navigation bar with links, header, a main content area, and a footer section at bootom.
The Flexbox layout adjusts and rearranges elements vertically on smaller screens to ensure a user-friendly experience.
Let us see an example −
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   .header {
      padding: 200px;
      text-align: center;
      background: #e72626;
      color: white;
   }
   .navbar {
      display: flex;
      background-color: #1abc9c;
   }
   .navbar a {
      color: white;
      padding: 14px 20px;
      text-decoration: none;
      text-align: center;
   }
   .navbar a:hover {
      background-color: #ddd;
      color: black;
   }
   .row {
      display: flex;
      flex-wrap: wrap;
   }
   .flexbox {
      flex: 70%;
      display: flex;
      background-color: #f1f1f1;
      padding: 20px;
   }
   .flexbox flexbox1,
   flexbox2 {
      flex: 35%;
   }
   .right_side {
      flex: 30%;
      background-color: white;
      padding: 20px;
   }
   .images {
      background-color: #f5ff34;
      width: 100%;
      padding: 20px;
      height: 100px;
   }
   .languages {
      height:250px;
         width:90%;
   }
   .info-button {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
   }
   .footer {
      padding: 20px;
      text-align: center;
      background: #ddd;
   }
   @media screen and (max-width: 500px) {
      .row,
      .flexbox,
      .navbar {
         flex-direction: column;
      }
   }
</style>
</head>
<body>
   <h4 style="text-align:center">Resize the browser to see the effect.</h4>
   <div class="navbar">
      <a href="#">Home</a>
      <a href="#">Courses</a>
      <a href="#">Articles</a>
      <a href="#">Setting</a>
      <a href="#">About us</a>
   </div>

   <div class="header">
      <h1>Tutorialspoint</h1>
      <h4>Simple Easy Learning</h4>
   </div>

   <div class="row">
      <div class="flexbox">
         <div class="flexbox1">
            <h2>HTML</h2>
            <h5>Jan 17, 2003</h5>
            <img src="images/html.png" class="languages">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            <button class="info-button">More info</button>
         </div>
         <br>
         <div class="flexbox2">
            <h2>CSS</h2>
            <h5>Sep 22, 1995</h5>
            <img src="images/css.png" class="languages">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
            <button class="info-button">More info</button>
         </div>
      </div>
      <div class="right_side">
         <h3>Articles</h3>
         <div class="images">
            <h3>HTML</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
         </div><br>
         <div class="images">
            <h3>CSS</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
         </div><br>
         <div class="images">
            <h3>Bootstrap</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
         </div><br>
         <div class="images" >
            <h3>Javascript</h3>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
         </div>
         <h2>About Me</h2>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
            and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.Lorem Ipsum is simply dummy text of
            the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      </div>
   </div>
   <div class="footer">
      <h2> 2023 Tutorialspoint</h2>
   </div>
</body>
</html>
Print Page