Loading…
20
Inline-block vs flexbox for a pagination bar, picked flex and spent 2 hours fighting whitespace ghosts
Working on a client site for a local bakery last Tuesday and their product page had 23 pages of items. I had to build a pagination bar and kept flip flopping between inline-block and flexbox. Inline-block always gives me that weird 4px gap between buttons from the newlines in HTML, and flexbox just felt cleaner for centering. So I went with flex, easy call right? Except then the active page button had a border that kept shifting the whole row by 1px because the box sizing was inconsistent across 3 different breakpoints. I finally just wrapped each list item in its own container and used justify-content with fixed widths. Took way longer than it should have just because I didn't test the responsive states first. Has anyone else hit that dumb border shifting issue with flex pagination, or do you just use inline-grid now to skip the whole debate? It's driving me nuts that such a small component caused this much problem.
0 comments
Log in to join the discussion
Log In0 Comments
No comments yet
Be the first to share your thoughts on this discussion.