Revision history [back]

To create an evenly spaced gap using flex box CSS, you can use the 'justify-content' property with the 'space-between' value. Here are the steps:

1. Create a container element and set its display property to 'flex'.

2. Add child elements to the container element.

3. Set the 'justify-content' property of the container element to 'space-between'.

4. This will create an even gap between the child elements.

Here is an example code snippet:

.container {
  display: flex;
  justify-content: space-between;
}

.container div {
  width: 100px;
  height: 100px;
  background-color: red;
}

<div class="container">
  <div></div>
  <div></div>
  <div></div>
</div>

In this example, the container element contains three child elements. The justify-content property is set to space-between, which creates an even gap between the child elements. The child elements have a width and height set to make them visible.