Should I use block display or flex display? I'm able to get the result I wanted from both options so which one is better?

[Aclixion]

Background information: I’m doing a challenge to practice my web development skills. Basically, what I’m doing is building snippets of a website in my own way by using HTML, CSS, and sometimes Javascript. For example, I remade the CDC’s Body Mass Index calculator from scratch. Here’s how it’s suppose to look like:

Here’s what I have: https://codepen.io/Aclixion/pen/mdqeBRO

My question involves the first two divs with the entries class. Here are what I’m referring to:

<div class="entries">
     <div class="field">
        <label for="feet">Feet</label>
        <input id="feet" type="number">
     </div>
     <div class="field">
        <label for="inches">Inches</label>
        <input id="inches" type="number">
     </div>
</div>

<div class="entries">
     <div class="pounds">
       <div class="field">
         <label for="pounds">Pounds</label>
         <input id="pounds" type="number">
       </div>
     </div>
</div>

Here’s a picture of what I want this section to look like (Which is what I have now for the “heights” section):

Here is my current styling for them:

.entries {
  display: flex;
  gap: 10px;
  margin-left: 10px;
}

.entries input {
  display: block;
  width: 75px;
}

Here’s what the styles look like with flexbox:

.entries {
  display: flex;
  gap: 10px;
  margin-left: 10px;
}

.field {
  display: flex;
  flex-direction: column;
}

.field input {
  width: 75px;
}

Note: The first selector didn’t change in both the current styling and the one with flex

Right now, I’m having trouble deciding whether or not to use flex containers for the divs with the field class. I thought about using flex containers because it can help simplify positioning the elements to my liking. At the same time, I can get the result I want without using flexbox. Should I use flexbox or should I not? What else should I change?

[LucLH]

Hello @Aclixion,

Most of the things can be done without Flexbox. Flexbox is a way you can use to position the elements and organise your page. You have the Grid properties too. It is up to you, about which method you prefer use. I would advice you to continue with Flexbox because it is something supported by all the new browser versions. It is on these kind of things you can focus your decision for example in asking yourself if you want your website be accessible only on the new browser version or also the older one. To verify the compatibility you can use the Can I use… website.

Source: "flexbox" | Can I use... Support tables for HTML5, CSS3, etc

Don’t know if it answer your wondering

[jenovs]

I prefer flexbox. That way I can avoid surprises like margin collapsing.