Consistent Spacing Between Flex Items with CSS `gap` Property

.flex-container {
    display: flex;
    flex-wrap: wrap; /* Optional, useful if items wrap */
    gap: 20px; /* Applies 20px space between items (row and column) */
    /* For older browsers or more granular control, use: */
    /* row-gap: 15px; */
    /* column-gap: 25px; */
}

.flex-item {
    padding: 15px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}

How it works: The `gap` property provides a streamlined way to create consistent spacing between flex items, both horizontally and vertically (when `flex-wrap: wrap` is used). Unlike margins, `gap` only creates space *between* items, preventing issues like margin collapse or extra space at the container's edges. This snippet shows how to apply a uniform `gap` or specify `row-gap` and `column-gap` separately for more control.