how to add space bettween elements in flex box

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;  
}

can you produce a stackblitz – programoholic Aug 03 '21 at 06:15 — programoholic, Aug 03 '21 at 06:15

score 1 · Answer 1 · answered Aug 03 '21 at 06:31

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>

programoholic · Answer 2 · 2021-08-03T06:35:44.653

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>

how to add space bettween elements in flex box

2 Answers2