随着移动端的普及，越来越多的网站和应用开始注重移动端用户体验，顶部导航作为网站和应用的重要组成部分之一，在移动端的实现方式也越来越多样化。本文将介绍如何使用 Flexbox 布局来实现移动端顶部导航栏的效果.
基本原理
Flexbox 是一种弹性布局模型，可以让我们更方便、快捷的实现复杂布局。在实现移动端的顶部导航栏时，我们可以使用 Flexbox 布局的一些特性来解决常见的布局问题，例如水平居中、平分空间等。
实现方法
1. 设置容器为 Flexbox 布局
首先我们需要设置顶部导航栏的父容器为 Flexbox 布局，这样子容器中的元素就可以根据我们所设置的特性来自适应布局了.
.nav-wrap {
display: flex;
justify-content: space-between;
align-items: center;
}justify-content: space-between用来将子元素平分容器中的空间，使得左侧导航和右侧操作可以分别排列在容器的两侧align-items: center用来将子元素垂直居中对齐
2. 编写 HTML 结构
在设置好容器的 Flexbox 布局之后，我们需要编写一些 HTML 结构来放置顶部导航栏中的元素，例如 Logo 图片、搜索框等.
-- -------------------- ---- -------
---- -----------------
---- -----------------
---- -------------- -----------
------
---- ------------------
------ ----------- -----------------
-- ---------------
------
------3. 设置子元素的 Flexbox 属性
接下来我们需要为子元素设置一些特定的 Flexbox 属性.
-- -------------------- ---- ------- --------- - ---------- -- ------------ -- ----------- ----- - ---------- - ---------- -- ------------ -- ----------- ----- - ------------------ - ------ ----- ------- ----- -------- - ----- ------- --- ----- ----- -------------- ---- -
flex-grow属性设置子元素在父容器中的占比，常用的属性值包括0、1、2等.flex-shrink属性用于设置子元素在容器缩小的情况下的收缩比例，通常我们设置为1，表示子元素可以按照容器的缩小比例进行缩小.flex-basis属性用于设置子元素的初始大小，通常我们设置为auto，表示子元素的大小可以根据自身的内容或者设定的大小进行调整.
在以上示例中，我们将 Logo 元素的 Flexbox 属性设置为 0，表示 Logo 不会响应容器的伸缩效果，在容器空间不够的情况下不会占用其他元素的位置. 而在右侧元素中，我们将 a 标签的 Flexbox 属性设置为 0，将 input 的 Flexbox 属性设置为 1，使得搜索框可以随着容器的伸缩而自适应大小.
总结
通过以上的操作，我们可以在 Flexbox 布局模式下实现移动端顶部导航栏的效果.使用 Flexbox 布局模式能让网站和应用的布局更为灵活、易于维护，从而更好地提升用户体验.
完整示例代码如下：
-- -------------------- ---- -------
-------
--------- -
-------- -----
---------------- --------------
------------ -------
-
--------- -
---------- --
------------ --
----------- -----
-
---------- -
---------- --
------------ --
----------- -----
-
------------------ -
------ -----
------- -----
-------- - -----
------- --- ----- -----
-------------- ----
-
--------
---- -----------------
---- -----------------
---- -------------- -----------
------
---- ------------------
------ ----------- -----------------
-- ---------------
------
------Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/64f43858f6b2d6eab3d51da5