如何在弹性框中的元素之间添加空间

Question

我需要在无休止的角材料滚动列表中显示计划作业列表， 对于列表中的每个元素，我需要使用 flexbox 将其分成 3 列。 在每一列中，我想显示某些数据。 由于某种原因，我无法在列表内的列之间添加空格。

这是我的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>

• 请注意，我使用角度材质 cdk-virtual-scroll-viewport

这是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

理想情况下，您应该执行以下操作并且它应该可以工作：

.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>

即使你的问题不是很清楚。您可以对 HTML 和 css 文件进行以下更新：

.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>

Answer 2

在弹性容器上使用 gap 属性，或在弹性项目上设置 [margin](http://developer.mozilla.org/en-US/docs/Web/CSS/margin)。

您当前的解决方案似乎不起作用，因为您在 flex 容器上设置了 CSS custom property --gap: 10rem，但实际上并没有应用该属性（至少在提供的代码中）。

您可以使用gap，这将确保弹性项目之间的数量固定。浏览器对gap 的支持很好，14.1 之前的 Safari 除外。

或者，您可以在所有弹性项目上设置margin-right，最后一个项目除外，以达到类似的效果。

这是一个工作（简化）示例：

.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>