Aligning elements left and center with flexbox

html

responsive-design

css-grid

flex-properties

byAlex Kataev·Jan 29, 2025

To align items left and center within a flex container, use justify-content: space-between; and a pseudo-element for uniform spacing.

<style>
  .flex-container {
    display: flex; 
    justify-content: space-between; 
  }
  .flex-container::after {
    content: '';
    flex: 1;  // magic trick to fill the space
  }
</style>

<div class="flex-container">
  <div>Left</div>
  <div style="text-align: center; flex: 2;">Center</div>
</div>

The .flex-container ensures a flex layout. justify-content: space-between; maintains the distance between items. Likewise, the ::after pseudo-element eases the center element's alignment without extra markup. Apply text-align: center; and flex: 2; to the center content for precise alignment.

Advanced techniques

Here, we'll delve into more substantial techniques for managing complex alignment scenarios that demand more than just the basics.

Grid system for complex layouts

CSS Grid can be your savior when dealing with complex layouts especially for maintaining consistent alignment across varying screen sizes:

.container {
  display: grid;
  grid-template-columns: auto 1fr auto;  // like dividing a cake into 3 pieces.
  align-items: center;
}

.left-item {
  grid-column: 1;  // this holds the knife
}

.center-item {
  grid-column: 2;  // this gets the biggest piece
  text-align: center;
}

.right-spacer {
  grid-column: 3;  // this makes sure no crumbs are left
}

Here, grid-template-columns defines the columns including the left auto-sized column, a flexible space for the center item, and an invisible right spacer.

Aligning with fixed container height

When centering with auto margins, setting a fixed container height can result in consistent alignment:

.flex-container {
  display: flex;
  height: 100px; /* Like setting the right jig for alignment */
}

.left-item {
  margin-right: auto; //Like elbowing everyone out of the left seat.
}

.center-item {
  margin: auto; //Leaning back and holding center stage.
}

Pseudo-element for cleaner code

To avoid additional HTML markup and maintain a cleaner codebase, utilize the pseudo-elements like ::before or ::after along with the flex properties:

.flex-container {
  display: flex;
}

.left-item,
.flex-container::before {
  flex: 1;  // Equal brothers sharing inheritance.
}

.center-item {
  flex: 2;  // The elder brother taking two shares.
  text-align: center;
}

Handling weird cases

In more complex scenarios where alignment gets tricky, you may need to use some advanced tricks to keep your code singing.

Negative Margins

Ever tried Norm from Cheers on a pub bench? That's negative margins for you. Especially useful when dealing with dynamic content or space that doesn't stick to a set pattern.

.center-item {
  margin-left: -50px; /* Just like Norm bending the bench. */
}

Unknown Widths

Remember Kevin Hart trying to stand next to Yao Ming? That's what happens when the width of the left element is unknown. Duplicating it and setting visibility: hidden; on the copy ensures that the center item stays centered.

.flex-container::before,
.flex-container::after {
  content: '';
  flex: 1;
  visibility: hidden; //Hidden but still taking up space. Just like Kevin!
}