在前端开发中，我们经常需要制作各种表单，如登录表单、注册表单、搜索表单等等。但是对于不同设备的屏幕尺寸，表单布局显示效果却有很大差异，有时候甚至出现错位或者溢出的问题。为了避免这些问题，我们可以使用 CSS Flexbox 来制作自适应的表单。
什么是 CSS Flexbox？
CSS Flexbox 是一种用于布局的 CSS 模块，它可以使元素在容器中自由的布局，并能够使元素的大小、顺序和对齐方式发生改变。使用 CSS Flexbox 可以很方便地实现自适应布局，因此被广泛运用在各种 Web 应用中。
制作自适应表单的方法
下面我们将通过一个示例来介绍如何使用 CSS Flexbox 制作自适应表单。
第一步：HTML 结构
我们先来看一下 HTML 结构，如下所示：
-- -------------------- ---- -------
----- -------------
---- -------------------
------ ----------------------
------ ----------- --------- ------------
------
---- -------------------
------ -----------------------
------ ------------ ---------- -------------
------
---- -------------------
------ --------------------------
------ --------------- ------------- ----------------
------
---- -------------------
------ ------------------------
------- ----------- --------------
------- -----------------------
------- -------------------------
---------
------
---- -------------------
------ -------------------------
------ --------------- ---------- -------------
------
------- -------------------------
-------这是一个典型的表单结构，包含姓名、邮箱、密码、性别和同意协议等字段。我们需要将这些字段按照一定的布局方式排列在一起。
第二步：CSS 样式
接下来，我们为表单添加 CSS 样式。首先，我们需要将 form 容器设置为 flex 布局：
.form {
display: flex;
flex-wrap: wrap;
}这样，我们就将表单元素排列成了一行，并且当容器宽度不够时，元素会换行排列。
接下来，我们为每个表单组件定义一个 form-group 类，并对其进行一些样式设置：
-- -------------------- ---- ------- ----------- - -------- ----- ------------ ------- -------------- ----- - ----------- ----- - ------ ------ ------------- ----- -
这里，我们为 form-group 类设置了一个 flex 布局，并使用 align-items 属性使其垂直居中。然后，我们定义了一个 label 宽度为 120px，然后在 label 后面添加了一些 margin 占位。这样，我们就获得了一个漂亮的表单布局。
最后，我们再对一些组件进行一些额外的样式设置：
-- -------------------- ---- ------- ------------------- -------------------- ----------------------- ------ - ----- -- ------- ----- -------- - ----- - --------------------- - ------- ----- -------- - ----- ----------------- -------- ------ ----- ------- ----- -
这里，我们为 input 和 select 组件设置了默认的高度为 40px，然后使用 flex 属性设置宽度为 1，这样它们就会自动填充空间，使得布局更具灵活性。最后，我们还为提交按钮设置了一些样式。
综合示例
最后，我们综合所有的代码进行展示：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------
-------
----- -
-------- -----
---------- -----
-
----------- -
-------- -----
------------ -------
-------------- -----
-
----------- ----- -
------ ------
------------- -----
-
-------------------
--------------------
-----------------------
------ -
----- --
------- -----
-------- - -----
-
--------------------- -
------- -----
-------- - -----
----------------- --------
------ -----
------- -----
-
--------
-------
------
----- -------------
---- -------------------
------ ----------------------
------ ----------- --------- ------------
------
---- -------------------
------ -----------------------
------ ------------ ---------- -------------
------
---- -------------------
------ --------------------------
------ --------------- ------------- ----------------
------
---- -------------------
------ ------------------------
------- ----------- --------------
------- -----------------------
------- -------------------------
---------
------
---- -------------------
------ -------------------------
------ --------------- ---------- -------------
------
------- -------------------------
-------
-------
-------结论
通过使用 CSS Flexbox，我们可以很方便地制作自适应的表单，使得布局更灵活、更美观。当然，不同的情况下，我们还需要使用其他的布局方式来适应不同的需求，例如使用 CSS Grid。但是，总的来说，CSS Flexbox 是一种非常有用的技术，值得我们去学习和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67753caa6d66e0f9aaf5b6fd