CSS：什么时候使用display flex和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> 

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