How to Build a Responsive Flexbox Layout with CSS

This tutorial demonstrates a simple yet effective way to build a mobile-friendly and responsive layout using CSS Flexbox. It ensures that your content scales beautifully across desktops, tablets, and smartphones.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Responsive Flexbox Layout</title>
  <style>
    * {
      box-sizing: border-box;
    }
    body {
      font-family: 'Segoe UI', sans-serif;
      margin: 0;
      padding: 20px;
    }
    .container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }
    .box {
      flex: 1 1 300px;
      background-color: #f4f4f4;
      border: 1px solid #ccc;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>

  <h2>Responsive Flexbox Example</h2>
  <div class="container">
    <div class="box">Item 1</div>
    <div class="box">Item 2</div>
    <div class="box">Item 3</div>
    <div class="box">Item 4</div>
  </div>

</body>
</html>

Try it

The above layout automatically adjusts how many boxes appear per row depending on the screen width. Each .box will shrink or expand to fit the available space, making it great for modern responsive design.

← PreviousNext →