form表单在不同分别率下@media screen配合css始终对齐显示

form表单在不同分辨率下，显示列数不同，label一直保持右对齐

form表单，在不同分辨率下，label一直右对齐；
css设置场景，比如在2k屏下显示三列，1k显示2列，具体显示几列看label和input设置的宽度；

.baseInfotest {  //form表单外层div
    display: flex;
    flex-direction: column;
	padding: 24px 0;

  label {
    width: 300px;
    justify-content: flex-end !important; //label一直右对齐
  }
  .formInput {
    width: 400px !important;
  }
  .formInputKpi {
    min-width: 1120px;
  }
  .formInputKpiM {  //disabled的情况下显示不了title;故写出disabled样式，可以加title
    width: 400px !important;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.25);
    background-color: #f5f5f5;
    opacity: 1;
  }
}

.searchFormtest {  //form表单的样式
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
  :global {
    .@{ant-prefix}-form-item {
      margin: 5px 20px 5px 0;
    }
  }
}

也可以配合大中小屏幕分辨率来使用

@media screen and (max-width: 1600px) {
  .newsText {
    width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
   }
}

@media screen and (min-width: 2326px) and (max-width: 2560px) {
  .newsText {
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
   }
}

@media screen and (min-width: 1600px) and (max-width: 2326px) {
  .newsText {
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
   }
}

<div className={styles.baseInfotest}>
	<Form
	     className={styles.searchFormtest} layout="inline"
	      form={searchForm}
	      validateMessages={validateMessages}
	 >
	    <Form.Item name={'a'} label=" A：">
	      <Input className={styles.formInput} disabled />
	    </Form.Item>
	    <Form.Item name={'b'} label=" B：">
	      <Input className={styles.formInput} />
	    </Form.Item>
	    <Form.Item name={'c'} label="C：" >
	      <Select
	        allowClear className={styles.formInput}
	      >
	        {_.map(_.get(allData, 'cList'), item =>
	          <Select.Option value={item.key} key={item.key}>
	            {item.name}
	          </Select.Option>,
	        )}
	      </Select>
	    </Form.Item>
	    <Form.Item name={'d'} label=" D：">
	      <Select placeholder="请选择" className={styles.formInput}>
	        <Select.Option value="1" key="1">1</Select.Option>
	        <Select.Option value="2" key="2">2</Select.Option>
	        <Select.Option value="3" key="3">3</Select.Option>
	      </Select>
	    </Form.Item>
	    <Form.Item name={'e'} label=" E：" >
	      <AutoComplete
	        className={styles.formInput}
	        options={department}
	        placeholder="请输入"
	        onSearch={fetchDepart}
	        allowClear
	      />
	    </Form.Item>
	    <Form.Item name={'f'} label="F：">
	      <Input.TextArea className={styles.formInputKpi} />
	    </Form.Item>
  </Form>
</div>