如何用Flex布局实现Info类中Label与Input的1:3等比对齐

没问题！用Flexbox来实现这个1:3比例的标签-输入框布局超级合适，不管屏幕尺寸怎么变都能保持布局稳定。我给你调整一下代码，顺便解释下关键要点：

第一步：修改CSS样式 #

核心是给.info容器加上Flexbox属性，同时给标签和输入框分配对应的空间比例：

.info {
  border: 2px solid steelblue;
  border-radius: 10px;
  padding: 10px;
  /* 核心Flex布局设置 */
  display: flex;
  flex-wrap: wrap; /* 屏幕较小时自动换行，避免元素挤压 */
  align-items: center; /* 标签和输入框垂直居中对齐 */
  gap: 10px; /* 标签与输入框、各组之间的间距，比margin更统一 */
}

/* 标签占1份宽度 */
.info label {
  flex: 1;
  min-width: 120px; /* 小屏幕下标签不至于太窄，可按需调整 */
}

.info input[type='text'] {
  margin: 0; /* 去掉原有的margin，用gap控制间距更协调 */
  padding: 5px;
  border: 2px solid orange;
  border-radius: 10px;
  flex: 3; /* 输入框占3份宽度，和标签保持1:3比例 */
  min-width: 200px; /* 小屏幕下输入框的最小宽度，可按需调整 */
}

第二步：完善JSX结构 #

确保每个输入框都和对应标签配对，放在.info容器内：

<div className='form'>
  <h3 id='intro'>Join Us Here</h3>
  <hr/>
  <div className='info'>
    {/* 第一组：姓名 */}
    <label htmlFor="name">Name:</label>
    <input type='text' id="name" placeholder="Enter your name"/>
    
    {/* 第二组：邮箱 */}
    <label htmlFor="email">Email:</label>
    <input type='text' id="email" placeholder="Enter your email"/>
    
    {/* 第三组：电话 */}
    <label htmlFor="phone">Phone:</label>
    <input type='text' id="phone" placeholder="Enter your phone"/>
  </div>
</div>

关键逻辑说明 #

• display: flex：将.info转化为Flex容器，内部元素自动成为Flex项目
• flex-wrap: wrap：当屏幕宽度不足以容纳一行的标签+输入框时，会自动换行，保证移动端体验
• flex: 1/flex: 3：强制标签和输入框的空间占比始终为1:3，不管屏幕大小如何变化
• min-width：设置最小宽度是为了避免在极小屏幕下，元素被压缩到无法正常使用的程度，你可以根据实际需求调整数值

内容的提问来源于stack exchange，提问作者Ninja