在使用 flexbox 进行响应式设计时面临问题答案

【问题标题】：facing problem in designing with flexbox for responsiveness在使用 flexbox 进行响应式设计时面临问题
【发布时间】：2020-04-10 20:41:47
【问题描述】：

我正在尝试连续显示两个文本框我尝试使用 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 材质
没有响应，看起来像 -->>

【问题讨论】：

你能提供stackblitz你的问题的链接吗？
将尺寸小于 720:width 的媒体查询添加到 css 并设置 display : block in that
我会添加一个小于 720px 宽度的媒体查询，正如@GaurangDhorda 所说，但除了更改显示之外，我会将 flex-direction 更改为 column 而不是 row .
这是因为你的input 静态width。仔细检查width 上是否有width 属性input。

标签： css angular flexbox angular-material

【解决方案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;
}

【讨论】：