在前端开发中，表单元素的排版往往会让开发者头疼。传统的布局方式需要使用大量的浮动、定位等 CSS 属性，不仅代码冗长，而且容易出现兼容性问题。而使用 CSS Flexbox 可以轻松解决表单元素排版问题，极大地提高了开发效率。
什么是 CSS Flexbox？
CSS Flexbox 是一种 CSS3 新增的布局方式，它能够让容器中的子元素自动排列，并可以根据不同的布局需求进行自适应。使用 Flexbox 布局可以轻松实现水平居中、垂直居中等常见布局效果。
如何使用 CSS Flexbox 布局表单元素？
下面我们以一个登录表单为例，介绍如何使用 CSS Flexbox 布局表单元素。
HTML 结构
我们首先需要准备好 HTML 结构，如下所示：
-- -------------------- ---- ------- ----- ------------------- ----------- ---- ------------------- ------ --------------------------- ------ ----------- ------------- ---------------- ------ ---- ------------------- ------ -------------------------- ------ --------------- ------------- ---------------- ------ ------- ------------------------- -------展开代码
CSS 样式
接下来，我们需要使用 CSS 样式进行布局。我们可以给表单元素的父元素 .login-form 添加 display: flex; 属性，使它成为一个 Flexbox 容器。然后，我们可以使用 justify-content 和 align-items 属性来控制子元素的排列方式。
-- -------------------- ---- ------- ----------- - -------- ----- --------------- ------- ---------------- ------- ------------ ------- ------ ------ ------- - ----- - ----------- - -------- ----- ------------ ------- -------------- ----- - ----- - ------------- ----- -展开代码
我们可以使用 flex-direction 属性来控制 Flexbox 容器中子元素的排列方向，这里我们将其设置为 column，表示子元素从上到下排列。使用 justify-content 属性可以控制子元素在主轴上的排列方式，这里我们将其设置为 center，表示子元素居中对齐。使用 align-items 属性可以控制子元素在交叉轴上的排列方式，这里我们将其设置为 center，表示子元素垂直居中对齐。
效果预览
最终的效果如下所示：
总结
CSS Flexbox 是一种非常实用的布局方式，可以轻松解决表单元素排版问题。在实际开发中，我们可以根据具体需求灵活运用 Flexbox 布局，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65fb0f49d10417a2226bec1f
