input fields not responding to display flex

Question

I have a set of input fields that look like so:

.input-set {
  display: flex;
  align-items: center;
}

<div class="input-set">
  <div class="group-1">
    <input class="input" />
    <input class="input" />
    <input class="input" />
  </div>

  <div class="group-2">
    <input class="input" />
    <input class="input" />
    <input class="input" />
  </div>

  <div class="group-3">
    <input class="input" />
    <input class="input" />
    <input class="input" />
  </div>
</div>

However, the set of three inputs fields are still showing horizontally. I have added display: flex; to the groupings of inputs and it is still showing horizontally.

score 1 · Answer 1 · answered Aug 19 '20 at 23:00

1

Inputs won't be affected by display flex, because they aren't direct children on flex element. For inputs to respond flex layout, add display flex to group-1, group-2, group-3

answered Aug 19 '20 at 23:00

Elvin Bayramov

97
9

To be clear I am wanting for each group to be vertically aligned, not just the inputs themselves. – Daniel Aug 19 '20 at 23:15

score 0 · Answer 2 · answered Aug 19 '20 at 23:05

0

Are you trying to make the .group-n div (parent of input) to show vertically? If that's the case, add flex-direction: column; into your .input-set class.

answered Aug 19 '20 at 23:05

Revon Zev

105
5

input fields not responding to display flex

2 Answers2