在开发前端页面时，我们常遇到并列放置的文本输入框和按钮出现高度不一致的问题，尤其是当使用不同的字体和字号时，这种问题更加突出。在传统的 CSS 布局中，我们往往需要手动设置元素的高度、上下边距等属性来尝试解决这个问题，但是这种做法非常繁琐且不利于页面的维护。
Flexbox 是一个新的 CSS 布局模型，它可以更加灵活地实现元素的排列和对齐。在使用 Flexbox 布局时，我们可以通过设置容器的属性来控制子元素的排列方式、对齐方式和间距等属性，从而实现文本输入框和按钮的对齐。
Flexbox 布局的基本概念
在使用 Flexbox 布局时，需要清楚几个基本的概念：
- 容器（container）：使用 Flexbox 布局的元素称为容器，它可以包含一个或多个子元素。
- 主轴（main axis）：在容器中排列子元素的方向称为主轴，它可以是水平方向（row）或垂直方向(column)。
- 交叉轴（cross axis）：与主轴垂直的方向称为交叉轴。
- 主轴起点（main start） 和 主轴终点（main end）：在主轴方向上，容器的起点和终点分别对应容器的左边框和右边框（或者是容器的上边框和下边框）。
- 主轴方向对齐方式（justify-content）：用于设置容器内子元素在主轴方向上的对齐方式。
- 交叉轴方向对齐方式（align-items）：用于设置容器内子元素在交叉轴方向上的对齐方式。
- 子元素（item）：容器内的每个元素称为子元素，在使用 Flexbox 布局时，子元素可以通过设置不同的属性实现排列和对齐。
使用 Flexbox 布局实现文本输入框和按钮的对齐
在实现文本输入框和按钮的对齐时，我们可以将它们包含在一个使用 Flexbox 布局的容器中，并针对容器的属性进行设置。以水平方向为例，我们需要使用以下的CSS代码：
-- -------------------- ---- -------
---------- -
-------- ----- -- -- ------- -- --
------------ ------- -- ----------- --
-
------------------- ----------------------- ------ -
------- ----- -- ----------- --
------- -- -- ------- --
-------- - ----- -- ------------ --
------- --- ----- ----- -- ----------- --
-在这段代码中，我们首先将容器的 display 属性设置为 flex，这样容器中的子元素就可以按照 Flexbox 的规则排列和对齐。接着，我们将容器的 align-items 属性设置为 center，这样就可以使容器内的子元素在交叉轴方向上居中对齐。最后，我们设置输入框和按钮的 height、margin、padding、border 属性，以使它们看起来更加美观。
示例代码
下面是一个完整的 HTML 示例代码，可以将其复制到新建的 HTML 文件中运行，以查看 Flexbox 解决文本输入框和按钮对齐的效果。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------
-------
---------- -
-------- ----- -- -- ------- -- --
------------ ------- -- ----------- --
-
------------------- ----------------------- ------ -
------- ----- -- ----------- --
------- -- -- ------- --
-------- - ----- -- ------------ --
------- --- ----- ----- -- ----------- --
-
--------
-------
------
---- ------------------
------ ----------- ---------------------
------ --------------- --------------------
-------------------
------
-------
-------总结
Flexbox 是一个非常方便和强大的 CSS 布局模型，它可以解决很多传统布局模型无法解决的问题，如实现文本输入框和按钮的对齐。学习并掌握 Flexbox 布局，有助于我们更加轻松地实现页面的布局和样式设计，提高我们的前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64774c2e968c7c53b03d18aa