CSS Flexbox 导航栏 - 构建博客（第一部分）

CSS Flexbox 是一种单向布局网站组件的方式，它可以一次布局一个组件。元素只能按行或按列排列，并且只有在 display 属性设置为“flex”时，才能按顺序排列并调整间距到所需位置。为了方便简洁，我很快意识到为所有项目/子元素创建容器的重要性。

创建博客时，我首先着手处理的是导航栏。用 CSS Flexbox 创建导航栏比我想象的要简单得多。以下是我使用的代码片段。

HTML

CSS

对于导航栏，我不需要对导航容器本身进行样式设置，而是直接使用 flex 布局来控制导航项的显示。“flex-flow”是一个简写元素，它结合了“flex-direction”和“flex-wrap”。它决定了导航项是水平排列还是垂直排列，以及它们是否会换行、反向换行或不换行。

默认值是“nowrap”，所以我把它改成了“wrap”。我还为该行应用了换行效果以实现响应式布局（移动端的汉堡菜单即将推出）。

`justify-content` 设置容器内元素的对齐方式。就像文本一样，元素也有右对齐、居中和左对齐三种选项，但我们使用 `flex-start` 将元素靠前对齐，使用 `center` 将元素靠前对齐，使用 `flex-end` 将元素靠后对齐；还有一些其他选项可以设置元素之间的间距，但在这里不需要。对于这个导航栏，我为导航项选择了 `flex-end`，并在每个 `<a>` 标签之间添加了 1em 的内边距。

为了演示效果，我更改了原有的颜色，使它们更加醒目。

如果你知道其他关于 Flexbox 的案例，请在Twitter上告诉我。

喜欢看视频？那就来 YouTube 看我写代码吧！