CSS: Determining the Best Time to Utilize Display Flex Versus Display Inline-Block

https://i.sstatic.net/SHfd0.png

Hey there! I'm looking to create a layout similar to the one shown above. I'm using Bootstrap4 and I know that I can utilize either display:flex or display:inline-block to achieve this. However, I'm unsure of which one is best practice for my scenario. Can you provide some guidance on when to use each approach?

Currently, my code looks 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>

htmlcssflexboxbootstrap-4

Answer №1

If you're looking to create a table, using HTML tables is the way to go. They have similar automatic stretching capabilities as flex. Tables have full support even 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>

If you need to create layouts or complex designs, consider utilizing flex. However, for simple text or image display, tables are still your go-to option.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enable the button when there is an error after submission in AngularJS

Has anyone encountered issues with dynamically disabling a button? I noticed that my API delays for 2 seconds to mimic a slow connection. I expected the submit button to be disabled upon submission and then re-enable itself. In HTML, manually disabling t ...

javascripthtmlajaxangularjs

Is there a way to eliminate the border of an image attribute pulled from an input field?

Seeking assistance with a persistent issue I'm facing. I have an input for an image and a script to display the selected image. However, when the input is empty, a frustrating black border appears around the image attribute. How can I remove this bord ...

javascripthtml

Is your Chrome DevTools changing CSS Link files to "Constructed Stylesheet" after you edit the CSS using Inspect Element? Find out how to fix this issue!

This issue relates to CSS files that are initially not identified as constructed stylesheets but end up being displayed as such after editing, rendering the file inaccessible. Specifically in Google Chrome DevTools (last observed in Chrome 86): Whenever ...

cssgoogle-chromegoogle-chrome-devtoolsinspect-element

In WordPress, the Slick slider plugin seems to be creating unexpected <p> tags with PHP code

I am facing an issue with my slick slider in WordPress that pulls WooCommerce product images. I have set up a shortcode for this feature, but it seems to insert random <p tags between the images, causing a blank space in the carousel slider. Can anyone ...

phphtmljquerywordpressslick.js

Listening for an event or using a CSS pseudo-class to detect when the scrollbar becomes

Are there any JavaScript event listeners or CSS pseudo classes that can detect when a scrollbar appears and disappears? For example, on Mac OS and Windows Internet Explorer 10 or newer, the scrollbars are hidden by default but appear when scrolling begins. ...

javascripthtmlcssjquery-eventspseudo-class

What is the best way to update the src of an input using an onclick event?

When I click the input, my background changes color as expected. However, the src of the input only changes on the second click. How can I make it change the source on the first click? Also, how can I change the src back to the original with a second cli ...

javascriptjqueryhtmlonclick

"Styling a form input with YAML and implementing a jQuery date picker field

Seeking help with a CSS question related to YAML. I've been struggling all day trying to position a jQuery date field next to a YAML CSS field, but so far I can only manage to have it display underneath the input field... Is there a way for the date ...

cssyaml

retrieve image source based on z-index

I found a way to retrieve the z-index value using this code snippet: findHighestZIndex('div'); function findHighestZIndex(elem) { var elems = document.getElementsByTagName(elem); var highest = 0; for (var i = 0; i < elems.length; ...

javascriptcssz-index

Is there a way to customize the animation for a button in material UI?

Trying to implement material UI in React and looking for a button that does not have the standard wave animation effect upon clicking, which you can see demonstrated here. Instead, I am searching for an animation that instantly fills the entire button wit ...

javascriptcssreactjsmaterial-ui

Exploring the positioning, placement, and orientation of Bootstrap popovers

Is there a way to prevent the bootstrap popover from moving away from the triggering element when the window is resized? What CSS should be used to position the tip of the popover near the top corner instead of on the left? Despite setting the placement ...

jquerycsstwitter-bootstraptwitter-bootstrap-tooltipbootstrap-popover

Please refrain from including HTML code within the div element

When I input the following text inside a textarea: <strong>test</strong> and then display it within a div, the text appears in bold instead of showing the HTML code as entered. How can I prevent the HTML code from being rendered and instead d ...

javascriptjqueryhtml

Design a CSS floating div with a captivating bubble effect

My current setup includes a DIV element styled as follows: <div class="modal"></div> .modal { position: fixed; z-index: 999999; right: 310px; top: 67px; width: 431.6px; height: 550px; border-radius: 25px; box-s ...

css

implement a click event handler for GLmol (webGL)

Check out GLmol, a Molecular Viewer built on WebGL and Javascript by visiting You can see a demo of GLmol in action at I am interested in adding a click function to GLmol. For example, when I click on a ball, I would like to retrieve information about it ...

javascriptjqueryhtmlthree.jswebgl

Troubleshooting Challenges with Embedding Videos in Wordpress

I'm running into an issue with a heavily customized Wordpress site. Out of nowhere, one of the pages has stopped functioning! The problem arises when attempting to click on a video link, which should open a lightbox clone (prettyPhoto) displaying a Y ...

phphtmlwordpressyoutubeprettyphoto

Showcase - Text aligned with image inside a container on a list item

I am currently facing the following situation, which I will illustrate with images: 1st scenario: In the image below, there is a small text and I have encountered an issue. The edge of my list does not align properly with the picture. I would like it to a ...

cssimagehtmlhtml-liststext-alignment

What is the best way to eliminate the Mat-form-field-wrapper element from a Mat-form-field component

I have implemented Angular mat-form-field and styled it to appear like a mat-chip. Now, I am looking to remove the outer box (mat-form-field-wrapper). https://i.sstatic.net/QkfC1.png <div class="flex"> <div class="etc"> ...

htmlcssangularmat-form-field

When employing a mask in Angular, the value directive does not hold any binding

<input type="text" class="form-control" [value]="phoneVariable" mask="000-000-0000"/> The use of mask in the input tag is causing issues with the functionality of [value] in Angular. For instance, if phoneVar ...

htmlangularngx-mask

Tips for incorporating an alt attribute into image tags using jquery

I recently inserted a Google map into a webpage and noticed that it generated multiple img tags without the alt attribute. I'm looking for a way to dynamically add the alt attribute to each img tag within a div using jQuery. Can someone suggest an alt ...

javascriptjqueryhtml

Incorporate a new CSS class into a DIV using JavaScript

Sample HTML: <div id="bar" class="style_one"></div> Is there a way to include the class style_two without deleting style_one? final outcome: <div id="bar" class="style_one style_two"></div> ...

javascripthtmlcss

Enhancing the smoothness of parallax scrolling

My header is going to be twice the height of the viewport. I added a simple parallax effect so that when you scroll down, it reveals the content below. However, I'm experiencing flickering in the content as I scroll, possibly due to the CSS style adju ...

javascriptjqueryhtmlcss