Flex Tips: Adding Gaps

Sometimes you need some gaps for your flex, right? But, flex doesn't support gaps, likes grid.

Here is how to make it:

.parent {
    display: flex;
    width: 100%;
    border: 1px solid black;
} 

.child {
    border: 1px solid black;
    height: 50px;
    width: fit-content;
}

.child:not(:first-child) {
    margin-left: 8px;  */ Gaps size / 2 */
}

.child:not(:last-child) {
    margin-right: 8px; */ Gaps size / 2 */
}

And here's the result:

Comments

[Temani Afif]

But, flex doesn't support gaps --> it does exactly the same as CSS grid and the support is pretty good also: caniuse.com/flexbox-gap