再在我们要去给导航栏添加点样式 .. 打开 navbar 这个 sass 文件 .. 回到 index.html，我们可以把它放在编辑器的底部 ...

右键 ... split down ，分离到底部 .. 调整一下 ... 这样再创建样式的时候，你可以参考页面的代码结构 ..

现在导航栏上的标志还有菜单会堆叠在一起显示 .. 用 css 里的 float ，你可以设置元素的浮动方向，如果你设置了标志还有菜单容器的宽度，并且设置它们浮动到左边。这样他们就会显示在同一排 ..

这里我们用另一种方法，可以试一下 flexbox，它是 css 提供给我们的布局用的一套方法 .. 这套方法里有一些属性你需要熟悉一下 .. 你还要知道这套方法是怎么影响布局的 ..

在宁皓，有个专门的课程，你可以花点时间去练习一下 ..

我要做的是去设置 content 这个容器的 display 属性 .. 因为这个容器里包装了 header ，还有 menu 元素 ..

.content ... 用一下 display，设置成 flex，这样这个容器里的元素就会使用 flexbox 的布局方法 ..

你会看到标志还有导航显示在同一排了 .. 这是因为默认情况下 .. flex-direction 这个属性的值是 row ，显示横排 ...

你也可以设置成 column ... 表示竖排 ...

这里我把它设置成 row ..

align-items 属性，可以设置容器里的子元素的对齐的方式，在 content 这个容器里， header 还有 menu 属性这个 content 容器的子元素 ..

把这个属性的值设置成 flex-end ... 表示终点 .. 现在是横排，终点表示的就是这个底部 ..