CSS Изгиб жестких ломающихся предметов

Question

Я безуспешно пытался разбить флекс из 36 дней на 12 левых выравниваний в строке. В настоящее время все 36 элементов отображаются в одной строке. Вот мой ASP. NET CORE .cshtm. Спасибо.

flex-start {
  display: flex;
  flex-wrap : wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.flex-item {
  display:flex;
  flex: 1 0 21%; 
  margin: 5px;
  height: 100px;
  background-color: blue;
}

<div class="flex-start">
  @foreach (var item in Model.ListOfClosingDates)
  {
    DateTime thisDate = new DateTime(item.OriginalDate.YearID, item.OriginalDate.MonthID, item.OriginalDate.StopEnteringDataAfter);
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="@thisDate.ToString("MM-dd-yyyy")" type="text" value="@thisDate.ToString("MM-dd-yyyy")" />
    </div>
    <time datetime='@thisDate.ToString("MM-dd-yyyy")' class='@((item.Updatable == true) ? "icon swingable" : "icon")' data-editable="@((item.Updatable == true) ? "true" : "false")">
      <strong class="time-header">@thisDate.ToString("MMM"), @thisDate.Year</strong>
      <span class="time-body">@thisDate.Day</span>
      <em class="time-footer">@thisDate.DayOfWeek</em>
    </time>
    @if (item.Updatable)
    {
      <a asp-controller="Admin" asp-action="Edit" class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='@thisDate.ToString("MM-dd-yyyy")'>Adjust Closing Date</a>
    }
  </div>
  }
</div>

Отображается в IE

Answer 1

Вот, 12 пунктов в строке:

.flex-start {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.flex-item {
  display: flex;
  flex: 0 1 calc(100% / 12 - 10px);
  margin: 5px;
  height: 100px;
  background-color: blue;
  overflow:hidden;
}

<div class="flex-start">
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="12-08-2021" type="text" value="12-08-2021" />
    </div>
    <time datetime='12-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Dec, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Wednesday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='12-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="11-08-2021" type="text" value="11-08-2021" />
    </div>
    <time datetime='11-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Nov, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Monday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='11-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="10-08-2021" type="text" value="10-08-2021" />
    </div>
    <time datetime='10-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Oct, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Friday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='10-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="09-09-2021" type="text" value="09-09-2021" />
    </div>
    <time datetime='09-09-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Sep, 2021</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Thursday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='09-09-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="08-09-2021" type="text" value="08-09-2021" />
    </div>
    <time datetime='08-09-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Aug, 2021</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Monday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='08-09-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="07-09-2021" type="text" value="07-09-2021" />
    </div>
    <time datetime='07-09-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Jul, 2021</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Friday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='07-09-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="06-08-2021" type="text" value="06-08-2021" />
    </div>
    <time datetime='06-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Jun, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Tuesday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='06-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="05-10-2021" type="text" value="05-10-2021" />
    </div>
    <time datetime='05-10-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">May, 2021</strong>
      <span class="time-body">10</span>
      <em class="time-footer">Monday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='05-10-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="04-08-2021" type="text" value="04-08-2021" />
    </div>
    <time datetime='04-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Apr, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Thursday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='04-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="03-08-2021" type="text" value="03-08-2021" />
    </div>
    <time datetime='03-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Mar, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Monday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='03-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="02-08-2021" type="text" value="02-08-2021" />
    </div>
    <time datetime='02-08-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Feb, 2021</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Monday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='02-08-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="01-11-2021" type="text" value="01-11-2021" />
    </div>
    <time datetime='01-11-2021' class='icon swingable' data-editable="true">
      <strong class="time-header">Jan, 2021</strong>
      <span class="time-body">11</span>
      <em class="time-footer">Monday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='01-11-2021' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="12-08-2020" type="text" value="12-08-2020" />
    </div>
    <time datetime='12-08-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Dec, 2020</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Tuesday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='12-08-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="11-09-2020" type="text" value="11-09-2020" />
    </div>
    <time datetime='11-09-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Nov, 2020</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Monday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='11-09-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="10-08-2020" type="text" value="10-08-2020" />
    </div>
    <time datetime='10-08-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Oct, 2020</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Thursday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='10-08-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="09-09-2020" type="text" value="09-09-2020" />
    </div>
    <time datetime='09-09-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Sep, 2020</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Wednesday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='09-09-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="08-10-2020" type="text" value="08-10-2020" />
    </div>
    <time datetime='08-10-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Aug, 2020</strong>
      <span class="time-body">10</span>
      <em class="time-footer">Monday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='08-10-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="07-09-2020" type="text" value="07-09-2020" />
    </div>
    <time datetime='07-09-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Jul, 2020</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Thursday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='07-09-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="06-08-2020" type="text" value="06-08-2020" />
    </div>
    <time datetime='06-08-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">Jun, 2020</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Monday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='06-08-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="05-08-2020" type="text" value="05-08-2020" />
    </div>
    <time datetime='05-08-2020' class='icon swingable' data-editable="true">
      <strong class="time-header">May, 2020</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Friday</em>
    </time>
    <a class="btn btn-primary btn-vssc btn-shadow editable" data-closingdate='05-08-2020' href="/Admin/Edit">Adjust Closing Date</a>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="04-08-2020" type="text" value="04-08-2020" />
    </div>
    <time datetime='04-08-2020' class='icon' data-editable="false">
      <strong class="time-header">Apr, 2020</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Wednesday</em>
    </time>
    <a class="btn btn-danger btn-vssc btn-shadow" href="/Admin/TransferToBI">BI Transfer</a> </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="03-09-2020" type="text" value="03-09-2020" />
    </div>
    <time datetime='03-09-2020' class='icon' data-editable="false">
      <strong class="time-header">Mar, 2020</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Monday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="02-10-2020" type="text" value="02-10-2020" />
    </div>
    <time datetime='02-10-2020' class='icon' data-editable="false">
      <strong class="time-header">Feb, 2020</strong>
      <span class="time-body">10</span>
      <em class="time-footer">Monday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="01-09-2020" type="text" value="01-09-2020" />
    </div>
    <time datetime='01-09-2020' class='icon' data-editable="false">
      <strong class="time-header">Jan, 2020</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Thursday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="12-09-2019" type="text" value="12-09-2019" />
    </div>
    <time datetime='12-09-2019' class='icon' data-editable="false">
      <strong class="time-header">Dec, 2019</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Monday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="11-08-2019" type="text" value="11-08-2019" />
    </div>
    <time datetime='11-08-2019' class='icon' data-editable="false">
      <strong class="time-header">Nov, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Friday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="10-08-2019" type="text" value="10-08-2019" />
    </div>
    <time datetime='10-08-2019' class='icon' data-editable="false">
      <strong class="time-header">Oct, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Tuesday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="09-10-2019" type="text" value="09-10-2019" />
    </div>
    <time datetime='09-10-2019' class='icon' data-editable="false">
      <strong class="time-header">Sep, 2019</strong>
      <span class="time-body">10</span>
      <em class="time-footer">Tuesday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="08-08-2019" type="text" value="08-08-2019" />
    </div>
    <time datetime='08-08-2019' class='icon' data-editable="false">
      <strong class="time-header">Aug, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Thursday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="07-09-2019" type="text" value="07-09-2019" />
    </div>
    <time datetime='07-09-2019' class='icon' data-editable="false">
      <strong class="time-header">Jul, 2019</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Tuesday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="06-10-2019" type="text" value="06-10-2019" />
    </div>
    <time datetime='06-10-2019' class='icon' data-editable="false">
      <strong class="time-header">Jun, 2019</strong>
      <span class="time-body">10</span>
      <em class="time-footer">Monday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="05-08-2019" type="text" value="05-08-2019" />
    </div>
    <time datetime='05-08-2019' class='icon' data-editable="false">
      <strong class="time-header">May, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Wednesday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="04-08-2019" type="text" value="04-08-2019" />
    </div>
    <time datetime='04-08-2019' class='icon' data-editable="false">
      <strong class="time-header">Apr, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Monday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="03-08-2019" type="text" value="03-08-2019" />
    </div>
    <time datetime='03-08-2019' class='icon' data-editable="false">
      <strong class="time-header">Mar, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Friday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="02-08-2019" type="text" value="02-08-2019" />
    </div>
    <time datetime='02-08-2019' class='icon' data-editable="false">
      <strong class="time-header">Feb, 2019</strong>
      <span class="time-body">8</span>
      <em class="time-footer">Friday</em>
    </time>
  </div>
  <div class="flex-item">
    <div>
      <input class="closingDate btn-shadow" data-closingdate="01-09-2019" type="text" value="01-09-2019" />
    </div>
    <time datetime='01-09-2019' class='icon' data-editable="false">
      <strong class="time-header">Jan, 2019</strong>
      <span class="time-body">9</span>
      <em class="time-footer">Wednesday</em>
    </time>
  </div>
</div>