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, если вы хотите создавать макеты и сложные дизайны.Для отображения простого текста или, возможно, некоторых изображений таблицы являются вашими друзьями.