When centering horizontally, li's get cut off

I am trying to layout li’s using flexbox. I have them set to column, with 3 li’s in each column. The problem is when I want the ul centered.

I’m centering the ul using align-content: center. When I do that, and have more li’s than the page can show (overflowed), the li’s at the beginning get cut off. (The ones on the left side get cut off, but the ones on the right side display fine.)

I will not have a specific number of li’s, it could range from 4 to 50. So I therefore cannot remove align-content: center, because when I have a small amount of li’s, (let’s say 4), the results are not what I want.

How can I center the ul without having it get cut off?

JSFiddle

I’m not entierly sure what effect you are trying for here. But one comment, should the display:flex be applied to the ul rather than the parent div? Since the div has only a single block element child, the ul, flex won’t do much. Applied to the ul it will affect the lis layout.

I meant I want the li’s centered

I took heed it, because I also do not really understand . hopefully I can come to learn and be guided by the masters of all .

It is a bit confusing. What you want is the align-content to be dependant on the number of lis, also dependant on screen size. So when the lis are few enough not to fill the screen, it should be center, but when they overflow, it should be flex-start.
Of course the problem comes from centring something that is potentially wider than the screen, I’m not sure that was in mind while they invented flex-box.
I don’t know what to suggest. Do you really want a layout that has horizontal scrollers?

1 Like

Yes this is the way that flexbox currently works and the problem may be addressed in future versions.

deleveoper.mozilla

Flexbox’s alignment properties do “true” centering, unlike other centering methods in CSS. This means that the flex items will stay centered, even if they overflow the flex container. This can sometimes be problematic, however, if they overflow past the top edge of the page, or the left edge (in LTR languages like English; the problem occurs on the right edge in RTL languages like Arabic), as you can’t scroll to that area, even if there is content there! In a future release, the alignment properties will be extended to have a “safe” option as well.

By all means watch and learn but please don’t post unless you have something constructive to add to the thread. If you like a post then just click the like button but please do not clutter up threads as that equates to spam.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.