how to add space bettween elements in flex box - css

Question

I need to display a list of scheduled jobs in an endless scroll list of angular material,
for each element in the list, I need to divide it into 3 columns using flexbox.
in each column, I want to display certain data.
for some reason, I'm not able to add space between columns inside the list.
here is my code in html
<app-nav>
<div class="grid-container">
<div class="row1">
<mat-grid-list cols="6" rowHeight="100px">
<mat-grid-tile [colspan]="1" [rowspan]="1" [style.background]="lightgreen">
<h2>All Scheduled Jobs</h2>
</mat-grid-tile>
<mat-grid-tile [colspan]="4" [rowspan]="1" [style.background]="lightgreen">
</mat-grid-tile>
<mat-grid-tile [colspan]="1" [rowspan]="1" [style.background]="lightgreen">
<button (click)="openCreateScheduledJobDialog()" mat-mini-fab color="primary"
aria-label="Example icon button with a plus one icon">
<mat-icon>plus_one</mat-icon>
</button>
</mat-grid-tile>
</mat-grid-list>
</div>
<div class="row2"> // the problem is in this part:
<cdk-virtual-scroll-viewport itemSize="70" class="example-viewport">
<mat-list>
<mat-list-item *cdkVirtualFor="let scheduledjob of scheduledJobs" class="example-item">
<div class="flex-container-list-item"> // here is the flex that i need to fix
<div class="details">
<h3 matLine>{{getJob(scheduledjob.jobID)}} Job</h3>
<h4 matLine> Status: {{getJobStatus(scheduledjob.isActive)}}</h4>
<p matLine>
<span> Start time: {{scheduledjob.startTime | date}} </span>
</p>
<p matLine>
<span> End time: {{scheduledjob.endTime | date}}</span>
</p>
<p matLine>
<span> Runs Every: {{scheduledjob.daysFrequency}} days
</span>
</p>
<p matLine>
<button mat-stroked-button color="primary"
(click)="openMachineDetailsDialog(scheduledjob.machineSerialNumber)">Machine Details</button>
</p>
</div>
<div class="edit"> <button mat-flat-button color="primary" (click)="openUpdateScheduledJobDialog(scheduledjob)">Edit</button></div>
<div class="delete"> <button mat-raised-button (click)="delete(scheduledjob)" color="warn">Delete</button>
</div>
</div>
<mat-divider></mat-divider>
</mat-list-item>
</mat-list>
</cdk-virtual-scroll-viewport>
</div>
<div class="row3">
</div>
</div>
</app-nav>
note that im using angular material cdk-virtual-scroll-viewport
here is the css:
.row1 {
grid-area: row1;
}
.row2 {
grid-area: row2;
}
.row3 {
grid-area: row3;
}
.grid-container {
display: grid;
grid-template-areas:
'row1 row1 row1'
'row2 row2 row2'
'row3 row3 row3 '
;
grid-gap: 2px;
padding: 2px;
}
.grid-container>div {
text-align: center;
padding: 10px 0;
font-size: 15px;
}
.example-viewport {
height: 600px;
border: 2px solid gray;
}
.example-item {
height: 50px;
}
/* ******************* list item flex ***************** */
.details {
background-color:lightcoral ;
}
.edit {
background-color: lightgreen;
}
.delete {
background-color: lightskyblue;
}
.flex-container-list-item {
display: flex;
border: 6px solid red;
justify-content: space-between;
--gap: 10rem;
flex-wrap: wrap;
}
.grid-container-list-item>div {
text-align: center;
padding: 10px 0;
font-size: 15px;
}

Answer 1

Use either the gap property on the flex container, or set [margin](http://developer.mozilla.org/en-US/docs/Web/CSS/margin) on your flex items.
Your current solution doesn’t seem to be working because you set a CSS custom property --gap: 10rem on your flex container, but then don’t actually apply that property (at least in the provided code).
You can use gap, and that will ensure a fixed amount between the flex items. Browser support for gap is good, with the exception of Safari before version 14.1.
Alternatively, you could set margin-right on all your flex items with the exception of the last item to achieve a similar effect.
Here’s a working (simplified) example:
.flex-container-list-item {
display: flex;
border: 6px solid red;
gap: 2rem;
flex-wrap: wrap;
}
.details {
background-color: lightcoral;
}
.edit {
background-color: lightgreen;
}
.delete {
background-color: lightskyblue;
}
<div class="flex-container-list-item">
<div class="details">
<h3>Job</h3>
<h4>Status: active</h4>
<p>
<span> Start time: 2 PM</span>
</p>
<p>
<span> End time: 4 PM</span>
</p>
<p>
<span> Runs Every: 3 days </span>
</p>
<p>
<button>Machine Details</button>
</p>
</div>
<div class="edit">
<button
mat-flat-button
color="primary"
(click)="openUpdateScheduledJobDialog(scheduledjob)"
>
Edit
</button>
</div>
<div class="delete">
<button mat-raised-button (click)="delete(scheduledjob)" color="warn">
Delete
</button>
</div>
</div>

Answer 2

Ideally you should do the followings and it should work :
.container{
display : flex;
flex-flow: row wrap;
justify-content: space-between;
}
.item{
margin: 10px;
height: 100px;
width: 100px;
}
.item1{
background-color: red;
}
.item2{
background-color: yellow;
}
<div class="container">
<div class="item item1"></div>
<div class="item item2"></div>
</div>
even though your question is not so clear. you can do following update on your HTML and css files :
.flex-container-list-item{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
<div class="flex-container-list-item">
<div class="details">details contents</div>
<div class="action">
<button
mat-flat-button
color="primary"
(click)="openUpdateScheduledJobDialog(scheduledjob)"
>
Edit
</button>
<button mat-raised-button (click)="delete(scheduledjob)" color="warn">
Delete
</button>
</div>
</div>