inline form elements with flex

Question

I am trying to create a form at the moment, that ideally with flex responds to the number of inputs with a group,

So I have a form setup like this:

<fieldset class="form__group">
     <input type="text" class="form_input" />
     <input type="text" class="form_input" />
 </fieldset>
 <fieldset class="form__group">
     <input type="text" class="form_input" />
     <input type="text" class="form_input" />
     <input type="text" class="form_input" />
 </fieldset>
 <fieldset class="form__group">
     <input type="text" class="form_input" />
 </fieldset>

What I am trying to achieve is that the container does not care how many children it has but will allow them to fill the available space evenly in a single row.

So 2 items get 50% (minus a but for margins/padding), 3 items get 33.3% and 1 item 100% etc etc etc,

My CSS looks like this,

.form__group {
    display: flex;
}

.form__input {
    flex: 1 1 0;
    background: #fff;
    color: #939598;
    border-radius: 30px;
    box-shadow: none;
    border: 1px solid #f1f2f2;
    padding-left: 15px;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
}

Which I thought would allow me to put children inline on the same row and allow flex to sort out widths and spacing?

Here is my WIP at the moment,

https://codepen.io/87Development/project/editor/AoNJzN/

So using flex how can create a row of inline form inputs that are equally spaced and widthed, without knowing how many elements may be in each form__group?

CSS has .form__input (2 underscores) and your HTML has one underscore — Gerard, Jul 25 '17 at 11:47
I recommend trying out a so called "flexbox playground". Just google it and you'll find several of them. — Tobias Glaus, Jul 25 '17 at 11:49

score 3 · Accepted Answer · answered Jul 25 '17 at 11:50

fieldset can present some issues with rendering...use a div instead.

Fieldset @ MDN

* {
  box-sizing: border-box;
}

.form__group {
  display: flex;
}

.form_input { /* note the single underscore */
  flex: 1;
  background: lightgrey;
  color: #939598;
  border-radius: 30px;
  box-shadow: none;
  border: 1px solid #f1f2f2;
  padding-left: 15px;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
}

<div class="form__group">
  <input type="text" class="form_input" />
  <input type="text" class="form_input" />
</div>
<div class="form__group">
  <input type="text" class="form_input" />
  <input type="text" class="form_input" />
  <input type="text" class="form_input" />
</div>
<div class="form__group">
  <input type="text" class="form_input" />
</div>

Them, if necessary, wrap the div wrappers in a `fieldset`- https://codepen.io/Paulie-D/pen/BdyQdG — Paulie_D, Jul 25 '17 at 12:03

inline form elements with flex

1 Answers1