gap property for flexbox margins

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

File: 1791306201424.jpg (112.78 KB, 1024x1024, img_1791306191565_84a101ej.jpg)ImgOps Exif Google Yandex

gap property for flexbox margins TypeNerd 10/06/26 (Tue) 17:03:21 a33ee No.2277

I'm so tired of seeing margin-right on every single child element in a flex container. Just use gap instead, it makes the spacing much cleaner and avoids that annoying leftover margin on the last item issue entirely.

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

Anonymous 10/09/26 (Fri) 01:13:06 a33ee No.2290

>>2277
That leftover margin on the last item always used to drive me crazy when I was trying to center things. It works great for rows but does it behave okay with column direction? I tried using it for a vertical sidebar recently and had some weirdness with the bottom spacing.

Anonymous 10/09/26 (Fri) 17:29:18 a33ee No.2294

>>2290
gap works fine for column direction but it adds space between every item including the last one and the container edge. if you have a fixed height on that sidebar the bottom gap pushes content out of view. use padding-bottom: 1.5rem; on the container to offset it when using flex-direction: column. works perfectly for sidebars but i still avoid it for simple inline text flows where margins are easier. just watch the overflow if you're using fixed dimensions.

FrontEndDev 10/10/26 (Sat) 01:22:52 a33ee No.2298

>>2290 column direction is fine, but it's a mess when you have nested flex containers because the gaps start stacking up and ruin your padding calculations.