Отображение списка массивов слева направо

Question

Я пытаюсь отобразить список массивов слева направо с помощью прокрутки div. Но это стало сверху вниз. Как я должен сделать, чтобы решить это? Это мой демонстрационный код в качестве ссылки.

HTML

<div>
  <h2 class="ylet-primary-500 alignleft">Sessions</h2>
</div>
<div style="clear: both;"></div>

<div *ngFor="let batch of batches">
  <div class="box">
    <div>
      <h3 class="classes">
        {{batch.month}}
        <span class="chips"> </span>
      </h3>
    </div>
    <div style="clear: both;">
      <p class="timings">
        <mat-icon matPrefix>access_time</mat-icon><span>{{batch.time}}</span>
        <span class="slots"> <mat-icon>list_alt</mat-icon>{{batch.slots}}</span>
      </p>
    </div>
  </div>
</div>

CSS

.box {
  border: 1px solid #ccc;
  padding: 4px;
  width: 70%;
  direction: rtl;
  display: inline-block;
}

Answer 1

Попробуйте обернуть контейнер l oop div контейнером div и добавить css flex style.

<div class="container">
<div *ngFor="let batch of batches">
  <div class="box">
    <div>
      <h3 class="classes">
        {{batch.month}}
        <span class="chips"> </span>
      </h3>
    </div>
    <div style="clear: both;">
      <p class="timings">
        <mat-icon matPrefix>access_time</mat-icon><span>{{batch.time}}</span>
        <span class="slots"> <mat-icon>list_alt</mat-icon>{{batch.slots}}</span>
      </p>
    </div>
  </div>
</div>

.container {
    display: flex;
    flex-wrap: wrap;
}