CSS gap Property for Flexbox

The gap property, previously available for CSS Grid, has been included for CSS Flexbox also.

gap property for Flexbox sets the gaps between rows and columns.

/* sets 20px row gap (in case content wraps to multiple rows) & 5px column gap */
#flexbox {
	display: flexbox:
	flex-direction: row;
	gap: 20px 5px;
}

gap sets both row gap & column gap. Its sub-properties row-gap & column-gap, can be used to set gap between only rows/columns.

Browser Compatibility

Tutorials & Resources

• gap for Flex layout (MDN)
• row-gap for Flex layout (MDN)
• column-gap for Flex layout (MDN)