现在我需要让这个搜索小图标在导航栏的右侧显示 .. 先给它添加一个包装元素 .. 可以用一个 div 标签，上面加上一个 search-icon 类 ..

现在这个带 search-icon 类的元素跟上面的 menu 还有 header 是兄弟 ... 它们的爸爸是这个带 content 类的元素 ..

再去设计一下这个 search-icon 的样式 .. 在 navbar 里面，添加一个样式选择器， .search-icon ..

回到浏览器 .. 检查一下导航栏上的元素，导航栏里面的标志，菜单，还有搜索小图标，它们的宽度都是各自的内容宽度 ..

它们都属于 content 的子元素 .. 我要让这个搜索占用 content 里面剩下的所有的宽度 .. 现在它的宽度就是它里面包装的这个小图标的宽度 ..

在这个元素里，用一下 flex-grow 属性，设置一下增加的值 .. 可以设置成 1 ，默认它的值应该是 0 ，现在 content 里面包装的 header 还有 menu 的 flex-grow 的值是默认的 0

这个搜索元素的 flex-grow 的值是 1 ，这样就会把 content 元素剩下的宽度交给这个搜索元素 ..

然后再设置一下文字的对齐方式 ... 用的是 text-align ，值设置成 right ...

现在这个搜索元素里的小图标就会靠右显示了 . 再让它垂直居中在这个导航栏上 ..

用一下 align-selft ，设置成 center ..

现在我们的导航栏在桌面设备上的样式就基本做好了 ...