Revision history [back]

To achieve an even amount of empty space at either end using flexbox, you can use the justify-content property with the value of space-between. This aligns flex items along the main axis with equal spacing between them, and with the first and last items at the edges of the container.

Here is an example:

HTML:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

CSS:

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

.item {
  /* Set styles for item */
}

In this example, the container element is set to display as a flex container, with the justify-content property set to space-between.

This will evenly distribute the available space between each item, so that there is an equal amount of empty space at either end of the container.