后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用 CSS flexbox 创建导航栏
什么是 CSS Flexbox？
快速提示！
将 Flexbox 应用于导航栏
什么是 CSS Flexbox？
Flexbox 是一种 Web 布局模型，它允许您创建响应式用户界面，这意味着它可以适应不同的屏幕尺寸。它使用行和列来构造元素。
如果您要从头开始创建导航栏，CSS flexbox 是一个不错的选择。
HTML
<body>
<!-- Navbar -->
<header>
<h1 id="nav-title">DEV.TO</h1>
<nav>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
此处，我们的 HTML 代码使用无序列表<ul>来列出导航项。您可以看到，目前我们的导航栏还没有什么内容。
使用 CSS flexbox，我们可以格式化并使其更具吸引力！
快速提示！
在深入探讨弹性盒子之前，我们先来快速了解如何格式化你的无序列表。下面的 CSS 代码会使用 来将你的导航项组织成一行，display: inline-block并使用 来删除那些不必要的项目符号list-style: none。
CSS
header li {
list-style: none;
display: inline-block;
padding: 0 20px;
}
将 Flexbox 应用于导航栏
要使用 flexbox，请将display: flexCSS 属性添加到元素。该属性应应用于包裹您要构建内容的父元素。在我们的例子中，它是<header>。
默认情况下，弹性框会将元素排列成一行，但你可以通过添加 来让它使用列flex-direction: column。对于导航栏，我们将使用默认值，因为我们希望它水平分布在页面上。
现在，为了对齐项目，我们可以先将所有内容向右移动。要做到这一点，请将其应用于justify-content: flex-end标题。
如果您一步一步操作，可能会注意到这也会将<h1>标题推到右侧。我们可以通过为 添加<h1>一个 CSS 属性来轻松解决这个问题margin-right: auto，该属性会告诉它自动填充右侧的任何空白。
差不多就是这样了！这应该能让你初步了解导航栏的基本布局。剩下的就是添加一些样式元素，比如边距、填充、颜色等等，让它看起来更美观。请参阅下面的示例。
CSS
/* Global */
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica;
}
/* Header */
header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 20px 50px;
box-shadow: 0 1px 8px #ddd;
}
#nav-title {
margin-right: auto;
font-size: 1.5em;
}
header li {
list-style: none;
display: inline-block;
padding: 0 20px;
}
header a {
text-decoration: none;
color: #555;
transition: all 0.3s ease 0s;
}
header a:hover {
color: #b2dfdb;
}
如果你想深入了解 flexbox 并了解它能做什么，这里有一个很棒的资源！https://css-tricks.com/snippets/css/a-guide-to-flexbox/
#100DaysofCode 第 7 天
文章来源：https://dev.to/jungjungie/create-a-navbar-with-css-flexbox-2leh