How to Center a Flex Container but Left-Align Flex Items

html

responsive-design

css

flexbox

byNikita Barsukov·Nov 10, 2024

To center a flex container and left-align flex items, apply display: flex; justify-content: center; to the flex container, providing it with width or max-width. The default behavior of the items will be left-aligned. In case of multi-line flex container, use align-items: flex-start; or apply align-self: flex-start; to the individual items:

.container {
  display: flex;
  justify-content: center;
  max-width: 800px; /* tailor to your needs */
}

.item {
  align-self: flex-start; /* For multi-line alignment, because they've their own mind too */
}

In your HTML file:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

This helps ensure your container is centered while allowing items to maintain left alignment.

Balancing Act: Centering & Left-Aligning

Ever tried walking straight with a tray of glasses? The flex container is much like that tray. align-items: flex-start; ensures all glasses (items) stay at the start (left-aligned), even when the tray walks in a straight line (centered).

The Great Wrap: Fixing Multi-Row Layouts

For left-aligned items at the start of each row in multi-line layouts, turning flex-wrap to wrap and align-content to flex-start brings the cavalry in:

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* For allowing the items to break into next line */
  align-content: flex-start; /* Aligns rows to start */
}

This keeps each row packed neatly at the top, making your web page ready for any cat-walk!

It's Media Query Time!

Responsiveness is the backbone of modern web-design. Use display: inline-block; and media queries to tame flex items like a cowboy tames a wild horse:

@media (max-width: 768px) {
  .item {
    display: inline-block; /* For keeping all items in line, just like boot-camp */
    width: 100%; /* Full width on smaller screens, because full is the new black */
  }
}

Last-row Showdown

On the last row, flex items can rebel. To ensure they toe the line (left align), use your secret CSS weapon: :nth-last-child. Shh... Don't let them know.

.container .item:nth-last-child(-n+3) { /* Replace 3 with your number of items */
  margin-right: auto; /* Magically aligns items to left */
}

Classroom-Grid Layout

Going beyond flexbox, we have the 2D grid layout system of CSS: display: grid. With it, arranging the classroom of items is a cinch:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(element-width, max-content)); /* Auto-magic ! */
  justify-content: center;
  gap: 10px; /* for breathing space */
}

And for the items:

.item {
  display: inline-block; /* For a responsive twist */
}

Desandro Masonry: Busting the Grid

Got different-sized items? Desandro Masonry, a JavaScript grid layout library, fits the bill. You might want to try it out if you love the Pinterest layout.

The Practical Magic: Demo and Edge Cases

Practical examples talk better than lorem-ipsum. Include a jsfiddle or live demo link. Remember to look at your layout with squinted eyes to spot the issues. Look for edge cases like single-line items, odd elements in a row, and irregular sized items.

explain-codes / Html / How to Center a Flex Container but Left-Align Flex Items

Linked

Giving wrapped flexbox items vertical spacing



Vertical align with Tailwind CSS across full screen div



Flexbox: center horizontally and vertically



How can I horizontally center an element?



Aligning a float:left div to center?

