How do I use Flexbox to evenly space items horizontally across a row?
Asked on Sep 04, 2025
Answer
Flexbox is a powerful layout tool in CSS that allows you to distribute space and align items within a container. To evenly space items horizontally across a row, you can use the `justify-content` property with the value `space-between`.
<!-- BEGIN COPY / PASTE -->
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
<style>
.container {
display: flex;
justify-content: space-between;
}
.item {
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
</style>
<!-- END COPY / PASTE -->Additional Comment:
- The `display: flex;` property on the container enables Flexbox layout.
- `justify-content: space-between;` distributes the items evenly, with the first item at the start and the last item at the end.
- Each item can have its own styling, such as padding and background color, to enhance visibility.
- This method ensures that the space between items is equal, regardless of the container's width.
Recommended Links: