CSS gap property:
There is a new gap CSS property for multi-column, flexbox, and grid layouts that works in newer browsers now! (See Can I use link 1; link 2). It is shorthand for row-gap and column-gap.
#box {
display: flex;
gap: 10px;
}
CSS row-gap property:
The row-gap CSS property for both flexbox and grid layouts allows you to create a gap between rows.
#box {
display: flex;
row-gap: 10px;
}
CSS column-gap property:
The column-gap CSS property for multi-column, flexbox and grid layouts allows you to create a gap between columns.
#box {
display: flex;
column-gap: 10px;
}
Example:
#box {
display: flex;
flex-wrap: wrap;
width: 200px;
background-color: red;
gap: 10px;
}
.item {
background: gray;
width: 50px;
height: 50px;
border: 1px black solid;
}<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>Videos
CSS gap property:
There is a new gap CSS property for multi-column, flexbox, and grid layouts that works in newer browsers now! (See Can I use link 1; link 2). It is shorthand for row-gap and column-gap.
#box {
display: flex;
gap: 10px;
}
CSS row-gap property:
The row-gap CSS property for both flexbox and grid layouts allows you to create a gap between rows.
#box {
display: flex;
row-gap: 10px;
}
CSS column-gap property:
The column-gap CSS property for multi-column, flexbox and grid layouts allows you to create a gap between columns.
#box {
display: flex;
column-gap: 10px;
}
Example:
#box {
display: flex;
flex-wrap: wrap;
width: 200px;
background-color: red;
gap: 10px;
}
.item {
background: gray;
width: 50px;
height: 50px;
border: 1px black solid;
}<div id='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>Before ~20202, Flexbox didn't have anything akin to border-spacing for tables. The answer below is from that time. Now, the gap property fulfills this role and is recommended for this application.
Flexbox doesn't have collapsing margins1. Therefore, achieving what you are asking for is a bit more difficult.
In my experience, the "cleanest" way that doesn't use :first-child/:last-child and works without any modification on flex-wrap:wrap is to set padding:5px on the container and margin:5px on the children. That will produce a 10px gap between each child and between each child and their parent.
JSFiddle Demo
.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;
}<div class="upper">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>
<div class="upper mc">
<div>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa<br/>aaa</div>
<div>aaa<br/>aaa<br/>aaa</div>
<div>aaa</div>
<div>aaa</div>
</div>Maybe you need to migrate to Bootstrap 5 and use the gap spacing utility.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center gap-3">
<button class="btn btn-outline-secondary">First</button>
<button class="btn btn-outline-secondary">second</button>
<button class="btn btn-outline-secondary">Third</button>
<button class="btn btn-outline-secondary">fourth</button>
<button class="btn btn-outline-secondary">Fifth</button>
<button class="btn btn-outline-secondary">six</button>
</div>Take a look on: https://getbootstrap.com/docs/5.3/utilities/spacing/#gap
Also: https://getbootstrap.com/docs/5.0/migration/
In Bootstrap 5, There is an option to use gap. Using the gap you can provide space between flex items. I was also struggling with the same issue and i don't wanted to use margin or padding. So gap is the best solution for me.
.d-flex{
gap:20px;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center">
<button class="btn">First</button>
<button class="btn">second</button>
<button class="btn">Third</button>
<button class="btn">fourth</button>
<button class="btn">Fifth</button>
<button class="btn">six</button>
</div>The
gapproperty only applies to flex-parents, not flex-items (flex-parents use it to control the gap between their child flex-items).- (The
gapproperty also applies todisplay: grid;, but that's off-topic in this QA)
- (The
To adjust the spacing of flex-items use an overridden
marginproperty instead.For
flex-direction: horizontalyou'll want to setmargin-leftandmargin-right(ormargin-inline-startandmargin-inline-end).For
flex-direction: verticalyou'll want to setmargin-topandmargin-bottom(ormargin-block-startandmargin-block-end).To have a larger effective gap then set any positive margin value.
- e.g. with
gap: 5pxandmargin-left: 1pxthen the effective gap to the left will be6px.
- e.g. with
To have a smaller effective gap then set a negative margin value.
- e.g. with
gap: 5pxandmargin-left: -1pxthen the effective gap to the left will be4px.
- e.g. with
This approach won't work for items with
margin: auto, but that's okay becausegap:isn't useful withautomargins anyway.Don't forget that you can also use
calcand--custom-propertiesto make the CSS easier to read, and to mix units (e.g.3.2emmargin with a10pxeffective gap adjustment).
In your case, there's 20px on either side of your items, so applying a margin-left of -15px will give you a 5px left gap, and a margin-right of -15px will give you a 5px right gap.
Which looks like this:
Like so:
.container{
display: flex;
gap: 20px;
}
.items{
width: 100px;
height: 100px;
background: red;
}
.item-4 {
background: blue;
margin-left: -15px; /* Adapt 20px gap to 5px */
margin-right: -15px; /* Adapt 20px gap to 5px */
}<div class="container">
<div class="items item-1"></div>
<div class="items item-2"></div>
<div class="items item-3"></div>
<div class="items item-4"></div>
<div class="items item-5"></div>
<div class="items item-6"></div>
</div>One way is, obviously, something along the lines of:
<div class="container">
<div class="items item-1"></div>
<div class="items item-2"></div>
<div>
<div class="items item-3"></div>
<div class="items item-4"></div>
</div>
<div class="items item-5"></div>
<div class="items item-6"></div>
</div>