How to align flexbox columns left and right?

html

responsive-design

flexbox

css

byAlex Kataev·Jan 10, 2025

Use display: flex; on the container and justify-content: space-between; for separating your flex items to the left and right. Apply align-self: flex-start; for left-aligned items and align-self: flex-end; for right-aligned items.

.container {
  display: flex;
  justify-content: space-between;
}

.left {
  align-self: flex-start;
}

.right {
  align-self: flex-end;
}

HTML:

<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div>

Advanced alignment: flexbox finesse

To achieve a balanced layout with flexbox, you need to understand how to control spacing and alignment. For instance:

Using justify-content: space-between; it's like telling your flex items, "keep your distance, folks!" But sometimes that "distance" isn't just enough.
Now, if you use margin-left: auto; on the second item, it's moved to the right, and we say to the first item, "Sorry, lefty! You're flying solo." Because this only affects right-side alignment, the left is unaffected.
Setting flex-grow: 1; on flex items is like saying, "Grow, my little items, grow!" They happily expand and fill any available space within the container.
You need to work with widths when you want columns to be responsive. Percentage values for your items' widths really pay nicely here.
Sometimes, padding can be your ally. It creates a space within the items, especially when space-between leaves something to be desired.

Addressing commonly faced challenges

When aligning flexbox columns, you might have to address these challenges:

Handling variable content size: Oh, not everything in life is consistent. Like your content size. Use flex-wrap: wrap; so your items can nicely squeeze in the content.
Cross-browser compatibility: Not all browsers speak the same language, specifically the older ones. Be sure to check your designs in other browsers, too.

Making it responsive: Shaping as per device

A good website design adapts. Let's add responsiveness to the mix. Use media queries to adjust flex properties at different viewport sizes. Maintain a good user experience across different devices, from small screen phones to widescreen desktop monitors.

Here's a quick implementation example:

@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
    /* All together now! Let's stack up. */
  }

  .left, .right {
    margin-left: 0;
    width: 100%;
  }
}