CODEWITHSUNDEEP
htmlcssflexboxbootstrap-4
Usman Iqbal
Usman Iqbal

Reputation: 2429

CSS : When to use display flex and display inline-block?

enter image description here

Hi, I have a scenario in which i want to make the above view. I am using Bootstrap4 and I know I can achieve this by using either display:flex or display:inline-block. Now I really wanna know which to use when ? What's the best practice ?

Right now i am doing something like this.

.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>

Upvotes: 0

Views: 407

Answers (1)

peperoli
peperoli

Reputation: 109

Well, this is essentially a table. So I suggest using HTML tables. The cells will stretch automatically just like with flex. Tables are fully supported back to 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>

Change to flex if you want to create layouts and complex designs. For displaying simple text or maybe some images, tables are your friends.

Upvotes: 1

Related Questions