Stacked inputs with rows using flexbox

Question

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.

Peilonrayz · Accepted Answer · 2020-06-02 14:42:37Z

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

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.
If you want to use flex in the whole of your code, you can set flex properties for .row class.
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;
}

Stack Exchange Network

Stacked inputs with rows using flexbox

1 Answer 1

You must log in to answer this question.

Hot Network Questions

Stacked inputs with rows using flexbox

1 Answer 1

You must log in to answer this question.

Related

Hot Network Questions