Как выровнять форму с помощью flexbox?

Question

Я хочу выровнять все входные данные моей формы, как первые два входа (Комната, Турист). (той же ширины) Я использовал flexbox, но он работал только в двух элементах, а остальные нет. Я сделал тот же стиль первых двух входов для других входов, но он не работает. кнопка также включена в flex как входы. каждая строка содержит два входа. вот мой код реакции:

render() {
    return <div className='device-form'>
      <div className="device-header">Device IMEI: {this.state.device.imei}</div>
      <div className="device-inputs">
        <div>
          <label>Room:</label>
          <select onChange={e => this.setState({ room_id: e.target.value })}>
            <option selected disabled hidden>Room</option>
            {this.state.rooms.map(x => <option value={x.id}>
              {'Room ' + x.room_number + ' Section: ' + x.section + ' / Floor: ' + x.floor}
            </option>)}
          </select>
        </div>
        <div>
          <label>Tourist:</label>
          <select onChange={e => this.setState({ tourist_id: e.target.value })}>
            <option selected disabled hidden>Tourist</option>
            {this.state.tourists.map(x => <option value={x.id}>
              {x.first_name + ' ' + x.last_name}
            </option>)}
          </select>
        </div>
        {(this.context.role == 3) ? <div>
          <label htmlFor="imei">IMEI:</label>
          <input defaultValue={this.state.device.imei} id="imei" onInput={e => this.setState({ imei: e.target.value })} />
          <label htmlFor="call_time">Call Time:</label>
          <input defaultValue={this.state.device.call_time} id="call_time" onInput={e => this.setState({ call_time: e.target.value })} />
          <label htmlFor="call_limit">Call Limit:</label>
          <input defaultValue={this.state.device.call_limit} id="call_limit" onInput={e => this.setState({ call_limit: e.target.value })} />
          <label htmlFor="intra_flotte">Intra Flotte:</label>
          <select name="intra_flotte" onInput={e => this.setState({ intra_flotte: e.target.value })}>
            <option selected disabled hidden>Intra Flotte?</option>
            <option value="0">No</option>
            <option value="1">Yes</option>
          </select>
        </div> : null}
      </div>
      <button onClick={this.edit}>Confirm</button>
    </div>;
  }

файл sass:

@import '../../../assets/var';
/*
  Device edit style
  .
  .
  .
  .
  .
  .

*/



.device-form{
  width: 100%;
  // height: 230px;
  background-color: #e5e5e5;
  border-radius: 5px;

}

.device-form .device-header{
  width: 100%;
  background-color: $hellodati-blue;
  height: 50px;
  box-sizing: border-box;
  border-radius: 5px;
  padding:20px;
  color: white;
}

.device-form select{
  width: 100%;
  height: 40px;
  border-radius: 5px;
}

.device-form input{
  width: 100%;
  height: 40px;
  border: 1px solid gray;
  box-sizing: border-box;
  // margin: 1%;
  padding: 1%;
  border-radius: 5px;
}


.device-inputs div{
  margin-left: 20px;
  display: inline-flex;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  flex-flow: column;
  margin-bottom: 20px;
  width: 45%;
  align-items: flex-start;
}

.device-inputs label{
  margin-bottom: 20px;
}

.device-form button{
  margin-bottom: 20px;
  margin-left: 20px;
  padding: 10px;
  border-radius: 50px;
  border: none;
  background-color: $restaurant-blue;
  color: white;
}

это текущее состояние: https://ibb.co/6RmpTzY

Answer 1

Насколько я понимаю, вы хотите установить входы под элементами [select] рядом 2 в каждой строке,

У вас есть все входы в одном (flex-column) div с шириной:45%, что приведет к тому, что все они окажутся на одной стороне (слева) друг над другом.

, чтобы решить проблему: вам нужно только добавить каждую пару [метка / вход] в отдельный div

Заменить секцию входов этим фрагментом

        <>
          <div>
            <label htmlFor="imei">IMEI:</label>
            <input
              defaultValue={this.state.device.imei}
              id="imei"
              onInput={e => this.setState({ imei: e.target.value })}
            />
          </div>
          <div>
            <label htmlFor="call_time">Call Time:</label>
            <input
              defaultValue={this.state.device.call_time}
              id="call_time"
              onInput={e => this.setState({ call_time: e.target.value })}
            />
          </div>
          <div>
            <label htmlFor="call_limit">Call Limit:</label>
            <input
                defaultValue={this.state.device.call_limit}
              id="call_limit"
              onInput={e => this.setState({ call_limit: e.target.value })}
            />
          </div>
          <div>
            <label htmlFor="intra_flotte">Intra Flotte:</label>
            <select
              name="intra_flotte"
              onInput={e => this.setState({ intra_flotte: e.target.value })}
            >
              <option selected disabled hidden>
                Intra Flotte?
              </option>
              <option value="0">No</option>
              <option value="1">Yes</option>
            </select>
          </div>
        </>