Keep the middle item centered when side items have different widths

CSS Grid: Another challenger

Stepping aside from Flexbox, consider the CSS Grid. This method offers straight-forward center content alignment without concern for item widths:

.grid-container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  justify-items: center;
}


Handling overflowing content

During combat with dynamic content lengths, overflow handling is essential. For Flexbox, use text-overflow: ellipsis;, like an ending narrative that teases more story:

.side-content {
  flex: 1; /* The power of flex */
  white-space: nowrap; /* Keep all text snug on one line */
  overflow: hidden; /* Hide the evidence */
  text-overflow: ellipsis; /* Replace with an Leonardo DiCapriosis: '...' */
}


Similarly, for CSS Grid:

.side-content {
  grid-column: auto / span 1;
  white-space: nowrap; /* Bow ties are cool, so is white-space: nowrap; */
  overflow: hidden; /* Magic trick: now you see, now you don't */
  text-overflow: ellipsis; /* The (dot) Matrix reloaded */
}


Enter, the margin-auto

No matter your layout choice, remember auto margins as your secret weapon. They behave like spring-loaded buffers, pushing other items around.

.left-content {
  margin-right: auto; /* Like an introvert at a party */
}

.right-content {
  margin-left: auto; /* Reverso! */
}


Auto vs Fixed: The flex-grow and flex-basis impact

Going deeper into flex properties, let's experiment with flex-grow and flex-basis:

• flex-grow lets the side items fill available space. Imagine it as an offering of unlimited growth, like a buffet.
• Kick-off elements with a flex-basis of 0. This absence of minimum width allows for a fair sharing of space. It's the "equal slices" pizza policy.
• Does one of your items crave unique alignment? Apply justify-self property for individual alignment goals.

Advanced layouts = CSS Grid Championship

When the going gets complex, the complex opt for the CSS Grid:

• grid-template-columns: auto 1fr auto allows your side content to have flexible breadth, while middle content can hold on to a fixed width or be affected by flex growth.
• grid-template-areas for micromanagement lovers. It gives them precise controls over placement, a veritable puppet master.

Interactive examples: Code in action

Interactive live examples can help visualize and manipulate these strategies:

• CodePen: Flexbox Centering
• CodePen: Grid Centering

A visually pleasing layout

Visual enhancements like padding and borders can be added for an aesthetic uplift:

.item {
  padding: 8px; /* Comfy padding for content, like a soft cushion */
  border: 1px solid #ccc; /* Dress your elements with a stylish border */
}
