xxxxxxxxxx
gap: value;
gap: <row-gap> <column-gap>;
xxxxxxxxxx
#box {
display: flex;
flex-wrap: wrap;
gap: 10px 20px; /* row-gap [column-gap]*/
}
xxxxxxxxxx
/* To adjust the space between rows that are wrapped, use 'align-content' */
.my-element {
align-content: stretch; /* Makes all contents in each row grow to fill up the entire space of the container, leaving no spacing at all */
align-content: flex-start; /* Leaves no space between rows, and pushes all the spacing to the bottom of the container */
align-content: center; /* Leaves no space between rows and pushes all the spacing equally to the top and bottom of the container */
align-content: flex-end; /* Leaves no space between rows, and pushes all the spacing to the top of the container */
align-content: space-between; /* Puts space in between rows, leaving no space at the top of the first row or at the bottom of the last row */
align-content: space-around; /* Puts equal spacing at the top/bottom of each row, making adjacent rows seem as though they have more spacing than the single rows */
align-content: space-evenly; /* Puts equal spacing between and around each row */
}
xxxxxxxxxx
.flex-gap {
display: inline-flex;
flex-wrap: wrap;
}
.flex-gap > div {
margin: 6px; /* HERE WE ADD THE SPACE */
}
xxxxxxxxxx
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly