Gap between two flex items

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 between two flex items

.upper
{
  margin:30px;
  display:flex;
  flex-direction:row;
  width:300px;
  height:80px;
  border:1px red solid;

  padding:5px; /* this */
}

.upper > div
{
  flex:1 1 auto;
  border:1px red solid;
  text-align:center;

  margin:5px;  /* and that, will result in a 10px gap */
}

.upper.mc /* multicol test */
{flex-direction:column;flex-wrap:wrap;width:200px;height:200px;}

Source: stackoverflow.com

Similar codes

0 vote319 views1 answer
Bootstrap 5 css how to change
CSS Bootstrap
1 vote277 views1 answer
How to gain full width of a phone website in html and css
CSS
21 votes223 views6 answers
Text border css
CSS
50 votes234 views3 answers
Simple css reset
CSS
20 votes267 views3 answers
Text overflow ellipsis two lines
CSS
0 vote296 views1 answer
How fixed image at top
CSS
0 vote245 views2 answers
Clearfix
CSS
0 vote255 views1 answer
Media screen tablet
CSS
-1 vote239 views1 answer
Css code for green
CSS
8 votes271 views2 answers
Css margin bottom
CSS