CSS：什么时候使用 display flex 和 display inline-block？答案

【问题标题】：CSS : When to use display flex and display inline-block?CSS：什么时候使用 display flex 和 display inline-block？
【发布时间】：2019-01-31 20:54:41
【问题描述】：

嗨，我有一个场景，我想制作上述视图。我正在使用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>

【问题讨论】：

如果你使用 bootstrap 4 使用 row 和 col 那么你不必担心显示类型
您的数据是表格形式，使用表格即可。
我会简单地使用表格，因为您的数据是表格格式，如果它是垂直或水平一行，那么我会使用 flex 和 flex-wrap
我也建议使用表格或引导行列。

标签： html css flexbox bootstrap-4

【解决方案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。为了显示简单的文本或一些图像，表格是您的朋友。

【讨论】：