Html 将flex与表单一起使用

我正在尝试使用flex将submit按钮定位在右侧栏的底部

<div class="container">
    <div class="left"></div>
    <div class="right">
        <form>
            <input type="text"/>
            <input type="submit" class="submit">
        </form>
    </div>
</div>

但是，我无法将表单元素拉伸到其父元素的高度

---

还有一点需要注意的是，IE9上会发生什么，提交按钮是否就在输入下面？例如，flex内容会被忽略吗？

在这种情况下，您需要使用嵌套的flex容器，因为flex box的目标是直接子元素而不是主子元素

.container{
显示器：flex；
}
.左{
背景：金；
高度：400px；
宽度：50%；
浮动：左；
}
.对{
背景：粉红色；
宽度：50%；
浮动：对；
显示：flex；/*为嵌套flex容器添加*/
}
形式{
背景：灰色无重复滚动0；
显示：flex；/*嵌套flex容器*/
宽度：100%；
}
输入{
align self:flex start；/*将输入与表单元素的开头对齐*/
}
.提交{
自对准：柔性端；
}

---

在这种情况下，您需要使用嵌套的flex容器，因为flex box的目标是直接子元素而不是主子元素

.container{
显示器：flex；
}
.左{
背景：金；
高度：400px；
宽度：50%；
浮动：左；
}
.对{
背景：粉红色；
宽度：50%；
浮动：对；
显示：flex；/*为嵌套flex容器添加*/
}
形式{
背景：灰色无重复滚动0；
显示：flex；/*嵌套flex容器*/
宽度：100%；
}
输入{
align self:flex start；/*将输入与表单元素的开头对齐*/
}
.提交{
自对准：柔性端；
}

---

我会一直使用flexbox。你必须为IE9等找到替代方案

.container{
显示器：flex；
}
.左{
背景：金；
高度：400px；
柔性生长：1；
}
.对{
背景：粉红色；
弹性：1；
显示器：flex；
}
形式{
背景：灰色；
显示器：flex；
弯曲方向：立柱；
弹性：1；
证明内容：之间的空间；
}
.提交{
自对准：柔性端；
}

---

我会一直使用flexbox。你必须为IE9等找到替代方案

.container{
显示器：flex；
}
.左{
背景：金；
高度：400px；
柔性生长：1；
}
.对{
背景：粉红色；
弹性：1；
显示器：flex；
}
形式{
背景：灰色；
显示器：flex；
弯曲方向：立柱；
弹性：1；
证明内容：之间的空间；
}
.提交{
自对准：柔性端；
}

请参阅

假设您希望在两列上应用flex，然后在表单本身上应用flex，以便submit按钮在底部对齐

至于IE9支持，我不确定，我没有那个浏览器，只需删除

display:flex属性，这可能就是它的外观

HTML

<div class="container">
    <div class="left"></div>
    <div class="right">
        <form>
            <div>
                <input type="text" />
            </div>
            <div id="submitHolder">
                <input type="submit" class="submit">
            </div>
        </form>
    </div>
</div>

请看

假设您希望在两列上应用flex，然后在表单本身上应用flex，以便submit按钮在底部对齐

至于IE9支持，我不确定，我没有那个浏览器，只需删除
display:flex属性，这可能就是它的外观

HTML

<div class="container">
    <div class="left"></div>
    <div class="right">
        <form>
            <div>
                <input type="text" />
            </div>
            <div id="submitHolder">
                <input type="submit" class="submit">
            </div>
        </form>
    </div>
</div>