CSS Template: display: flex;

📝 Use Case

This template is used when you want to place boxes or elements side-by-side. It's useful for card layouts, parallel buttons, or responsive design structures.

📘 Explanation

By applying display: flex; to a parent element, its children are automatically laid out horizontally. The gap property controls the spacing. In this example, .flex-container is the parent, and .flex-box represents each child element.

✅ Demo

Box 1

Box 2

Box 3

📄 Code (Snippet)

<style>
  .flex-container {
    display: flex;
    gap: 1rem;
  }
  .flex-box {
    flex: 1;
    padding: 1rem;
    background: #f2f2f2;
    border: 1px solid #ccc;
    text-align: center;
  }
</style>

<div class="flex-container">
  <div class="flex-box">Box 1</div>
  <div class="flex-box">Box 2</div>
  <div class="flex-box">Box 3</div>
</div>

📦 Code (Full HTML)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex Layout Demo</title>
  <style>
    .flex-container {
      display: flex;
      gap: 1rem;
    }
    .flex-box {
      flex: 1;
      padding: 1rem;
      background: #f2f2f2;
      border: 1px solid #ccc;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="flex-container">
    <div class="flex-box">Box 1</div>
    <div class="flex-box">Box 2</div>
    <div class="flex-box">Box 3</div>
  </div>
</body>
</html>

Copied!

🧩 Practical Techniques for Flexbox Layout

display: flex is one of the most powerful CSS properties in modern web layout. It enables intuitive element positioning and is ideal for responsive design.

🎯 Basic Alignment Techniques

Use justify-content to control horizontal alignment and align-items for vertical alignment. For example, justify-content: space-between evenly distributes elements and aligns them to the edges. Adding flex-wrap: wrap allows elements to wrap automatically when the screen is narrow.

✨ Advanced Layout Adjustments

The flex property on child elements allows you to fine-tune proportions. For example, using flex: 2 with flex: 1 creates a 2:1 element ratio. The order property can also be used to change the visual order without modifying the HTML structure.

📱 Responsive Design Tips

For mobile displays, you can switch to a vertical layout using flex-direction: column. Combined with media queries, this allows for device-specific optimization. Adjusting the gap value based on screen width is also recommended.

Flexbox is powerful, but for very complex layouts, consider using CSS Grid. Also, if you need to support older browsers, include vendor prefixes like display: -webkit-box.