flex布局，固定div

Flex布局是一种用于网页布局的CSS模块，它提供了一种灵活的方式来排列和对齐元素。通过使用Flex布局，可以轻松实现固定div的效果。

要实现固定div，可以使用Flex布局的属性来设置。首先，需要将父容器设置为Flex容器，可以通过设置`display: flex;`来实现。然后，可以使用`justify-content`属性来水平对齐子元素，使用`align-items`属性来垂直对齐子元素。

下面是一个示例代码，展示如何使用Flex布局来固定div：

HTML代码：

<div class="container">
  <div class="fixed-div">固定的div</div>
  <div class="content">其他内容</div>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
  height: 100vh; /* 设置容器高度为视口高度 */
}

.fixed-div {
  background-color: #f0f0f0;
  padding: 20px;
}

在上面的代码中，`.container`是Flex容器，`.fixed-div`是要固定的div，`.content`是其他内容。通过设置`.container`的样式，可以将`.fixed-div`固定在页面中央。