3
\$\begingroup\$

I am trying to create stacked inputs using flexbox, with the additional ability to also set rows. Here is the code:

.stacked-inputs,
.stacked-inputs .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
}
.stacked-inputs .row {
    width: 100%;
    margin-bottom: 10px;
}
.stacked-inputs > input,
.stacked-inputs .row > input {
    position: relative;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    min-width: 0;
}
<div class="stacked-inputs">
  <input type="text" placeholder="First name">
  <input type="text" placeholder="Last name">
</div>

<br /><br />

<div class="stacked-inputs">
  <div class="row">
    <input type="text" placeholder="First name">
    <input type="text" placeholder="Last name">
  </div>
  <div class="row">
    <input type="text" placeholder="Job title">
    <input type="text" placeholder="Year started">
  </div>
</div>

When inputs are stacked without using rows, they will all be stacked horizontally. However, if a row is used, then obviously the rows of stacked inputs can be divided up nicely. Would love a review of this code from someone. Thanks in advance.

\$\endgroup\$

1 Answer 1

2
\$\begingroup\$

The following is my opinion on how to improve your code.

  1. You don't need write flex-flow: row-wrap because flex by default set row, then you can use another property of css flex-wrap: wrap.
  2. If you want to use flex in the whole of your code, you can set flex properties for .row class.
  3. Care about responsiveness, because flex is very good for making your page responsive. Due to this, we use flex-wrap and min-width to our input.
.stacked-inputs,.stacked-inputs .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

}
.stacked-inputs .row {
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
    margin-bottom: 10px;
}
.stacked-inputs > input,
.stacked-inputs .row > input {
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    min-width: 200px;
}
\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.