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

Question

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>

if you use bootstrap 4 use row and col then you do not have to worry about dispaly type — לבני מלכה
– לבני מלכה, Commented Jan 31, 2019 at 8:08
I would simply use a table because your data is in table format, If it was one line vertical or horizontal then i would use flex with flex-wrap — Thanveer Shah
– Thanveer Shah, Commented Jan 31, 2019 at 9:14

peperoli · Accepted Answer · 2019-01-31 08:38:30Z

1

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.

answered Jan 31, 2019 at 8:38

peperoli

1095 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related