Ask any question about CSS here... and get an instant response.

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.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How do I use Flexbox to evenly space items horizontally across a row?

Asked on Sep 04, 2025

Answer

The Q&A Network