How to center flexbox items in a row?

Question

I receive an unknown number of items that I display in a flexbox, with a maximum of 3 per row. As long as there are 3 items on a row, this code centers it but if there are less than 3, it will keep them as if there were 3, but with a gap where the other items would be. For example, if there are 11 items, it will render four rows with a gap in the 'third spot' on the fourth row. I want the two items on the final row to be centered.

This is what I currently have:

.Container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.item {
    flex-basis: 33%;
    display: flex;
    justify-content: center;
}

Am I missing something obvious, or is this not possible with flexbox?

Edit your question with html code also. – Nitin Bisht Apr 23 '20 at 10:24 — Nitin Bisht, Apr 23 '20 at 10:24

score 2 · Answer 1 · answered Apr 23 '20 at 10:27

You should know about main axis and cross axis, here you want to center them on main axis and hence you need to use justify-content: center on container itself.

Try this code.

.Container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}

Read about it more on this page. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

Timur Rasulev · Answer 2 · 2020-04-23T10:33:35.177

0

try to add justify-content: center to .Container.

Also, here is a good examples https://css-tricks.com/snippets/css/a-guide-to-flexbox/

edited Apr 23 '20 at 10:33

answered Apr 23 '20 at 10:28

Timur Rasulev

51
3

How to center flexbox items in a row?

2 Answers2