CSS：何时使用display flex和display inline-block？

Question

您好，我有一个想做以上观点的场景。我正在使用Bootstrap4，并且我知道可以通过使用display:flex或display:inline-block来实现。现在我真的想知道何时使用哪个？最佳做法是什么？

现在我正在做这样的事情。

.job-details-container {
  display: flex;
}

.job-details-container .job-details-type {
  width: 15%
}

<div class="job-details-container">
    <div class="job-details-type">Id</div>
    <div class="job-details-content">0234</div>
</div>

    

Answer 1

好吧，这本质上是一个表。因此，我建议使用HTML表。像flex一样，单元格将自动拉伸。从IE 8开始就完全支持表。

.job-details {
  border-collapse: collapse;
  width: 80%;
  margin: auto;
}

td, th {
  border-bottom: 1px solid #dddddd;
  text-align: left;
  padding: 10px;
}

<table class="job-details">
  <tr>
    <td>Id</td>
    <td>0234</td>
  </tr>
  <tr>
    <td>Service Type</td>
    <td>Move</td>
  </tr>
  <tr>
    <td>Schedule</td>
    <td>11:00 am, Jan 1, 2019</td>
  </tr>
  <tr>
    <td>...</td>
    <td>...</td>
  </tr>
</table>

如果要创建布局和复杂的设计，请更改为flex。为了显示简单的文本或某些图像，表是您的朋友。