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:
Top comments (1)
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