I have a question regarding aligning the input fields in form using flexbox. This is my code:

enter image description here

.form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.form input,
  select {
  margin-left: 2rem;
}

<div className="form">
  <label>
    <span>Please write your title: </span>
    <select>
      <option value="male">Mr.</option>
      <option value="female">Mrs.</option>
      <option value="female-young">Miss.</option>
    </select>
  </label>
  <label>
    <span>Please write your name: </span>
    <input type="text" />
  </label>
  <label>
    <span>Please write your surname: </span>
    <input type="text" />
  </label>
  <label>
    <span>Please pick today's date: </span>
    <input type="date" />
  </label>
</div>

I want to align input fields. Thank you in advance for help!

CodePudding user response：

All you need to change is the span tag from span to div. This will lead to the title taking up the entire screen and the input field being pushed to the new line, aligning all four of them. To make the input fields also inline, just wrap each input field along with the title inside a div as shown below(apologies for the bad formatting).

<div className="form">
<label>
<div>
<span>Please write your title: </span>
  <select>
  <option value="male">Mr.</option>
  <option value="female">Mrs.</option>
  <option value="female-young">Miss.</option>
  </select>
</div>
</label>
<label>
<div>
<span>Please write your name: </span>
<input type="text" />
</div>
</label>
<label>
<div>
<span>Please write your surname: </span>
<input type="text" />
</div>
</label>
<label>
<div>
<span>Please pick today's date: </span>
<input type="date" />
</div>
</label>
</div>

CodePudding user response：

Grid could help here.

example from your code.

.form {
  display: grid;
  grid-template-columns:repeat(2,auto);
  gap:0.5em;
  justify-content:start;
}

label {
display:contents;
}
.form input,
  select {
  margin:auto;
  margin-left: 2rem;
}

<div >
  <label>
    <span>Please write your title: </span>
    <select>
      <option value="male">Mr.</option>
      <option value="female">Mrs.</option>
      <option value="female-young">Miss.</option>
    </select>
  </label>
  <label>
    <span>Please write your name: </span>
    <input type="text" />
  </label>
  <label>
    <span>Please write your surname: </span>
    <input type="text" />
  </label>
  <label>
    <span>Please pick today's date: </span>
    <input type="date" />
  </label>
</div>

label{display:contents} can be avoided if you do not wrap the input or select inside the label , but link it via the attribute for. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/labelto get the purpose and usage ;)

CodePudding user response：

I added a few more styles to your sample code if this is what you're looking for.

.form {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.form label {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 10px;
}
.form label span {
  flex: 0 1 28%;
}
.form label input, .form label select {
  flex: 0 1 70%;
}

<div >
  <label>
    <span>Please write your title: </span>
    <select>
      <option value="male">Mr.</option>
      <option value="female">Mrs.</option>
      <option value="female-young">Miss.</option>
    </select>
  </label>
  <label>
    <span>Please write your name: </span>
    <input type="text" />
  </label>
  <label>
    <span>Please write your surname: </span>
    <input type="text" />
  </label>
  <label>
    <span>Please pick today's date: </span>
    <input type="date" />
  </label>
</div>

CodePudding user response：

You don't really need flexbox here. Just define the label elements as display: block (to fill the entire line) and the spans inside them as inline-blocks with a min-width setting that you adjust to the length of the longest span text:

label {
  display: block;
}

label>span {
  display: inline-block;
  min-width: 200px;
}

<div className="form">
  <label>
    <span>Please write your title: </span>
    <select>
      <option value="male">Mr.</option>
      <option value="female">Mrs.</option>
      <option value="female-young">Miss.</option>
    </select>
  </label>
  <label>
    <span>Please write your name: </span>
    <input type="text" />
  </label>
  <label>
    <span>Please write your surname: </span>
    <input type="text" />
  </label>
  <label>
    <span>Please pick today's date: </span>
    <input type="date" />
  </label>
</div>