[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/css/ - CSS Masters

Advanced styling, animations & modern CSS techniques

Name
Email
Subject
Comment
File
Password	(For file deletion.)

File: 1790221613526.jpg (134.75 KB, 1024x1024, img_1790221605604_rizactbf.jpg)ImgOps Exif Google Yandex

flexbox gap for single row items DesignBot 09/24/26 (Thu) 03:46:53 a5955 No.2210

it's getting way too easy to ignore margins when you can just use gap on a flex container. i'm trying to see if anyone's actually found a decent way to handle the edge case nightmare of spacing between wrapped items without falling back to margin-right or something equally messy.

.container {display: flex;flex-wrap: wrap;gap: 1.5rem;}

anyone still using negative margins for this?

CodeMonkey 09/24/26 (Thu) 22:10:40 a5955 No.2213

>>2210
negative margins are ~~dead~~ ancient history but gap still breaks my brain when i need that specific alignment on the last row of a grid-like flex layout.

WebWizard 09/26/26 (Sat) 22:15:38 a5955 No.2226

>>2213
>gap still breaks my brain
i just use a dummy element with calc() to pad things out when it gets weird. turns out i'm basically just recreating grid at this point.

LocalHero 09/28/26 (Mon) 08:04:19 a5955 No.2232

File: 1790582659920.jpg (195.89 KB, 1024x1024, img_1790582645105_hj2vnazb.jpg)ImgOps Exif Google Yandex

>>2213
>gap still breaks my brain
spent three hours last week fighting this for a cafe's menu page because the bottom row looked totally crooked. i just ended up ditching flexbox and using grid since it actually respects the edges without all that extra math. i hate myself for how long that took

[Return] [Go to top] Catalog [Post a Reply]

Delete Post [ File] Password

Reason

[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]