React+Styled Components 表单对称布局CSS实现问题求助

以下是调整后的完整样式代码，直接替换原有ItemText样式即可实现标签、输入框、按钮各占一列的对称布局：

const ItemText = styled.div `
    padding-top: 1%;
    text-align: center;
    display: block;
    /* 可选配置：限制表单最大宽度，避免大屏下元素过于分散 */
    max-width: 700px;
    margin: 0 auto;

    .form-inline {  
        display: flex; /* 补充缺失的flex布局声明 */
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        /* 统一子元素间距，替代零散margin避免宽度计算偏差 */
        gap: 12px;
      }
      
      .form-inline label,
      .form-inline input,
      .form-inline button {
        /* 平分父容器宽度，实现三等分列布局 */
        flex: 1;
        box-sizing: border-box;
        margin: 5px 0;
      }

      .form-inline label {
        text-align: right;
        padding-right: 8px;
      }

      .form-inline input {
        vertical-align: middle;
        padding: 10px;
        background-color: #fff;
        border: 1px solid #ddd;  
      }
      
      .form-inline button {
        padding: 10px 20px;
        background-color: dodgerblue;
        border: 1px solid #ddd;
        color: white;
        cursor: pointer;
      }
      
      .form-inline button:hover {
        background-color: royalblue;
      }
      
      @media (max-width: 800px) {
        .form-inline {
          flex-direction: column;
          align-items: stretch;
        }
        .form-inline label {
          text-align: center;
          padding-right: 0;
        }
      }
`

核心改动说明 #

• 显式给.form-inline添加display: flex声明，修复原代码未声明flex布局导致的样式异常问题
• 给三个子元素统一添加flex:1属性，自动平分父容器宽度实现对称列效果
• 新增box-sizing: border-box配置，避免padding、border撑大元素宽度导致布局错位
• 移动端适配调整标签对齐方式为居中，适配纵向排列的视觉效果
• JSX结构无需修改，保持原有代码即可正常运行

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