QP School

Full Version: How to make a flexbox in CSS3
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Example:

<!DOCTYPE html>
<html>
<head>
  <title>Flexbox Example</title>
  <style>
    /* Apply flexbox to the container element */
    .container {
      display: flex;
      justify-content: space-around;
    }
    /* Apply flex items */
    .item {
      width: 100px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</body>
</html>

Explanation:

CSS Flexbox is used for creating flexible and responsive layouts. In this example, the container class is a flex container with the property display: flex, and the justify-content property is set to space-around, which distributes the flex items evenly with space around them. The item class represents the flex items, each with a width and height of 100 pixels and a light blue background color.