css弹性布局felx高度自适应

CSS弹性布局（Flex）是一种用于网页布局的强大工具，可以快速简单地实现高度自适应的效果。

当使用Flex布局时，可以使用一些属性来控制项目的布局，其中包括：

.flex-container {
  display: flex; /* 确定为弹性布局 */
  flex-direction: row; /* 指定主轴方向为横向 */
  justify-content: space-between; /* 项目之间的距离平均分布 */
  align-items: center; /* 项目在交叉轴上居中显示 */
}

上面的例子中，我们使用了flex-direction属性来指定弹性容器的主轴方向为横向。由于我们想要实现高度自适应的效果，因此应该将交叉轴方向设为纵向。

为了让弹性容器中的项目能够高度自适应，我们需要在项目的CSS属性中添加一些特殊的值，其中包括：

.flex-item {
  flex: 1 1 auto; /* 使用弹性因子使项目自适应高度 */
}

上述代码中，我们使用了flex属性来指定项目的弹性因子。其中，1表示项目在伸缩过程中所占比例，并且会占满整个容器；1表示项目在收缩中所占比例，也会占满整个容器；auto表示项目的尺寸在伸缩过程中不会改变，即高度自适应。

通过使用Flex布局和特殊属性值，我们可以快速实现高度自适应的效果，使页面更具有吸引力和可读性。