Css 使用flexbox进行响应性设计时面临的问题

我试图在一行中显示两个文本框 我尝试使用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]

[！[
名字
姓
][1]][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>

---

你能提供你的问题的

stackblitz

链接吗？将小于720:width的媒体查询添加到css中，并设置display:block，如@GaurangDhorda所说，我会添加小于720px宽度的媒体查询，但不需要更改显示，我会将伸缩方向改为

列

而不是

行

。这是因为您的

输入

静态

宽度

。请仔细检查

输入

上是否有

宽度

属性。

.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;
}