Html 如何根据多个条件调整此Flexbox布局？ 标题文本 供应商： 选项1 患者电子邮件： 患者手机：

这是您的一种可能性。根据你所说的你想要的，在我看来css网格是更好的选择

因此，我添加了css网格，其中包含

网格模板列：max content max content 1fr作为列，它将在您创建新行时添加新行

我让包装div（
.grid>div
）使用
display:contents
，虽然还没有在所有主流浏览器上完全支持它，但使用它的方法是删除包装div，因为grid将处理其余部分


正文{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
#盒子{
弯曲方向：立柱；
证明内容：中心；
背景色：小麦；
显示器：flex；
边框：2件纯黑；
边界半径：15px；
边框颜色：黑色；
填充：20px 40px；
利润率：10px 50px；
盒影：5px10px 18px#8888888；
}
#横幅{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
背景色：#0099cc；
边界半径：500px；
填充：10px 50px 0 50px；
保证金：0自动10px自动；
}
#横幅文本{
字体大小：14px；
文本对齐：居中；
颜色：白色；
边缘底部：15px；
}
.对{
字体大小：10px；
文本对齐：右对齐；
}
#框输入[type=“tel”]，
输入[type=“email”]，
挑选{
字体大小：100%；
利润率：0.10px；
/*宽度：200px*/
}
a:链接{
字体大小：12px；
字体大小：粗体；
文字装饰：无；
自对准：居中；
}
a:悬停{
文字装饰：下划线；
颜色：蓝色；
}
.按钮{
框大小：边框框；
显示器：flex；
对齐项目：居中；
证明内容：中心；
字体大小：16px；
宽度：150px；
边框：2个实心#0099cc；
背景色：#0099cc；
颜色：#ffffff；
边界半径：15px；
文字装饰：无；
大纲：无；
}
.按钮：悬停{
边框：2倍纯白；
颜色：#ffffff；
填充物：5px10px；
}
.按钮：禁用{
边框：1px实心#999999；
背景色：#中交；
颜色：#666666；
}
文本区{
字号：18px；
高度：250px；
宽度：100%；
}
标签{
字体大小：粗体；
}
.组{
显示器：flex；
柔性包装：包装；
证明内容：中心；
对齐项目：居中；
}
.电网{
显示：网格；
网格模板列：最大内容最大内容1fr；
}
.grid>div{
显示：内容；
}
.grid>div>：第一个孩子{
自我证明：柔性端；
}
@仅介质屏幕和（最大宽度：600px）{
.电网{
网格模板列：1fr；
}
.grid>div>：第一个孩子{
自我证明：灵活启动；
}
}

标题文本
供应商：
选项1
患者电子邮件：
患者手机：
谢谢。网格不工作，我必须支持ie11。而且它没有响应性（随着屏幕宽度的减小，每行中的元素需要放入列中，以支持小屏幕移动。不幸的是，我认为flex box无法达到您想要的效果。它不是一个制作列、表和网格的工具。它是一个在您不知道容器或项目大小时进行最佳排列的工具。我'将向css网格添加响应性，因为这只是一个带有断点的媒体查询。@cycle:与流行的虚假信息相反，IE 11支持（较旧的规范）css网格；例如，这四个部分。IE11的版本存在一些问题，但大部分功能都存在。
Current Layout
-------------------

 - Banner Row:Group
 -   Column 1: Label   Column 2: Input or Select  Column 3: Button or Link
 - EndGroup
 - Banner Row:Group
 -   Column 1: Label   Column 2: Input or Select  Column 3: Button or Link
 - EndGroup
 - Banner Row:Group
 -   Column 1: Label   Column 2: Input or Select  Column 3: Button or Link
 - EndGroup