Answers for "gap within flex container"

css flex gap between items

/* limited support (Q1/2021: Firefox, Chrome, Safari) */
.flex-container
{
  display: flex;
  gap: 5px;
}

/* broad support */
.flex-item
{
  margin: 5px;
  /* and/or */
  padding: 5px;
}

gap css flex

/* elements in a row */
	.row-flex-container {
      display: flex;
      flex-direction: row;
      column-gap: 2rem;
    }

	/* elements in a column */
    .column-flex-container {
      display: flex;
      flex-direction: column;
      row-gap: 2rem;
    }