How to Align Elements Left and Center with Flexbox Without Absolute Positioning?

Aligning Elements Left and Center with Flexbox

Flexbox provides a powerful way to align elements within a container. However, a common challenge arises when attempting to align one element to the left and another to the center without resorting to absolute positioning.

The Problem

When using margin-right: auto to align the left element, it inadvertently pushes the center element to the right. This is because the auto value distributes the remaining space equally among the elements that have it applied.

The Solution without Absolute Positioning

To circumvent this issue without absolute positioning, add a third empty element to the container:

<code class="html"><div class="parent">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right"></div>
</div></code>

Then, apply the following CSS:

<code class="css">.parent {
  display: flex;
}

.left, .right {
  flex: 1;
}</code>

How It Works

The flex property determines how the available space is distributed among the growing elements. In this case, both left and right are set to grow and will evenly distribute the space between them. Since there are only two growing elements, the center element will always be perfectly centered.

Benefits of This Approach

This approach is superior to the accepted answer in several ways:

• It doesn't require copying left content to the right and hiding it to achieve equal width for both sides.
• It relies on the inherent properties of flexbox to achieve the desired alignment, making it a more elegant solution.

The above is the detailed content of How to Align Elements Left and Center with Flexbox Without Absolute Positioning?. For more information, please follow other related articles on the PHP Chinese website!