Flex 布局是一种基于 Flex 容器和 Flex 项目的弹性盒子模型，可以通过设置一系列 Flex 属性来实现灵活的布局和排列方式。
Flex 布局可以使用以下几个关键属性来控制 Flex 容器和 Flex 项目的布局和排列方式：
- display: 设置元素为 Flex 容器，可以设置为 flex 或 inline-flex。
- flex-direction: 控制 Flex 容器中子元素排列的方向，默认为 row，即水平方向，还可以设置为 column，即垂直方向。
- justify-content: 控制 Flex 容器中子元素沿着主轴线的对齐方式，可以设置为 flex-start、flex-end、center、space-between、space-around 等。
- align-items: 控制 Flex 容器中子元素沿着交叉轴线的对齐方式，可以设置为 flex-start、flex-end、center、baseline、stretch 等。
- flex-wrap: 控制 Flex 容器中子元素是否换行，可以设置为 nowrap、wrap、wrap-reverse。
- align-content: 控制 Flex 容器中多行子元素沿着交叉轴线的对齐方式，只有在容器内存在多行子元素时才有效，可以设置为 flex-start、flex-end、center、space-between、space-around、stretch。
- flex: 控制 Flex 项目在 Flex 容器中的伸缩比例和基准大小。
- order: 控制 Flex 项目在 Flex 容器中的排列顺序。
下面是一个示例 HTML 页面，其中演示了如何使用 Flex 布局来实现一个简单的导航栏：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flex Layout Example</title>
<style>
body {
margin: 0;
padding: 0;
}
.nav {
display: flex;
justify-content: center;
background-color: #333;
color: #fff;
height: 50px;
line-height: 50px;
}
.nav-item {
flex: 1;
text-align: center;
cursor: pointer;
transition: background-color .3s;
}
.nav-item:hover {
background-color: #666;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-item">Home</div>
<div class="nav-item">About</div>
<div class="nav-item">Contact</div>
</div>
</body>
</html>在上面的示例中，使用了 display: flex 属性将一个 div 元素设置为 Flex 容器，然后通过设置 justify-content: center 属性将其中的子元素在水平方向上居中排列。导航栏中的每个菜单项使用
正文完