Educational

Flexbox Layout

Written by

Saim Khalid

in

<!DOCTYPE html>
<html>
<head>
  <style>

.container {
  display: flex;
  gap: 20px;
  background: lightgray;
  padding: 20px;
}
.item {
  background: skyblue;
  padding: 30px;
  flex: 1; /* Equal width items */
  text-align: center;
}
  </style>
</head>
<body>
  <div class="container">

&lt;div class="item"&gt;Box 1&lt;/div&gt;
&lt;div class="item"&gt;Box 2&lt;/div&gt;
&lt;div class="item"&gt;Box 3&lt;/div&gt;
  </div>
</body>
</html>

Explanation:

  • display: flex; arranges items horizontally.
  • gap: spacing between items.
  • flex: 1; makes items share equal space.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts