Web实现：flex弹性布局两栏自适应布局上下案例

最新推荐文章于 2025-05-30 11:58:14 发布

原创最新推荐文章于 2025-05-30 11:58:14 发布 · 696 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css

笔记同时被 3 个专栏收录

127 篇文章

订阅专栏

HTML

78 篇文章

订阅专栏

CSS

68 篇文章

订阅专栏

这个博客介绍了如何利用CSS的Flexbox布局创建一个三部分的页面结构：一个固定高度的静态区域和一个占据剩余空间的灵活区域。通过设置`.flex-auto`类的属性，实现了在不同屏幕尺寸下两栏布局的自适应效果。

HTML部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./index.css" />
    <title>用 Flex 实现两栏自适应布局</title>
  </head>
  <body>
    <div class="flex-auto">
      <div class="static"></div>
      <div class="flexible"></div>
    </div>
  </body>
</html>

CSS部分：

.flex-auto {
  margin: 0 auto;
  width: 300px;
  height: 500px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}
.flex-auto .static {
  height: 200px;
  flex: none;
  background-color: #D5E8D4;
}
.flex-auto .flexible {
  flex: 1;
  background-color: #FFF2CC;
}