使用Flexbox进行响应设计时面临的问题

Question

我正在尝试连续显示两个文本框 我尝试使用flexbox使其具有响应性，但是我无法输入代码

.css

.form-container{
   background-color: #fff;
    border: 1px solid black;
    box-shadow: 2px 2px 7px 0px #b7afaf;
    padding: 11px;
    margin: 33px;
}

.flex-container {
    display: flex;
    justify-content: center;
   flex-direction: row;
    box-shadow: 2px 2px 7px 0px #b7afaf;
 }


 .flex-container > div {
    margin: 0px 12px;
   font-size: 12px;
    box-shadow: 2px 2px 7px 0px #b7afaf;
    padding: 11px;
    margin: 13px;
  }

HTML

[![<form  \[formGroup\]="employeeForm" (ngSubmit)="onSubmit(employeeForm)"> 
<div class='form-container'>

    <div class='flex-container'>
        <div><span> First Name </span> 
          <mat-form-field appearance="outline">
              <input matInput formControlName='fname'>
           </mat-form-field>  
        </div>
        <div><span> Last Name </span>
          <mat-form-field appearance="outline">
              <input matInput formControlName='lname' type='text'>
  </mat-form-field>
        </div>
      </div>  

      </div>
      </form>][1]][1]

• 我已将Angular材质用于文本框
• 它没有响应，看起来像->>

Answer 1

带有html的示例：

 <div class='flex-container'>
     <mat-form-field appearance="outline">
         <input matInput formControlName='fname'>
     </mat-form-field>  
     <mat-form-field appearance="outline">
        <input matInput formControlName='lname' type='text'>
      </mat-form-field>
 </div>

您应该在mat-form-field上设置以％为单位的宽度和最小宽度：

.flex-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; //if you want it to go to the line if it's too small
}
mat-form-field {
  flex-basis: 50%;
  width: 50%;
  min-width: 100px;
}