Flex布局案例

css , , 评论

空白页

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>空白页</title>
    <style>
        .container {
            margin: 0;
            height: 100vh; /* 视口高度 */
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            background-color: green; /* 背景颜色 */
        }
    </style>
</head>
<body>
<!-- 可以在这里添加任何内容 -->
    <div class="container"></div>
</body>
</html>

ChatGPT

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ChatGPT 模拟界面</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      height: 100vh;
      justify-content: space-between;
      background-color: #f8f8f8;
      text-align: center;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
      background-color: #fff;
      border-bottom: 1px solid #ddd;
    }
    .header span {
      font-size: 14px;
    }
    .main {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }
    .main h1 {
      font-size: 24px;
      margin-bottom: 40px;
    }
    .button {
      padding: 15px 20px;
      margin: 10px 0;
      width: 80%;
      max-width: 400px;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }
    .footer {
      padding: 10px 20px;
      background-color: #fff;
      border-top: 1px solid #ddd;
      display: flex;
      align-items: center;
    }
    .footer input {
      flex-grow: 1;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      margin-right: 10px;
    }
    .footer button {
      padding: 10px 15px;
      border: none;
      background-color: #007bff;
      color: white;
      border-radius: 5px;
      cursor: pointer;
    }
    .logo {
      width: 50px;
      height: 50px;
      background: url('favicon.ico') no-repeat center center;
      background-size: contain;
      margin: 20px 0;
    }
  </style>
</head>
<body>
<div class="header">
  <span>12:17</span>
  <span>ChatGPT</span>
  <span>4G</span>
</div>
<div class="main">
  <div class="logo"></div>
  <h1>今天能帮您些什么？</h1>
  <div class="button">规划一次旅行，像本地人一样游览首尔</div>
  <div class="button">写一段文字 邀请一位朋友在婚礼上做我的同伴</div>
</div>
<div class="footer">
  <input type="text" placeholder="给“ChatGPT”发送消息">
  <button>发送</button>
</div>
</body>
</html>

侧边栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单, 右侧内容</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 通用样式 */
        .container {
            display: flex; /* 使用Flex布局 */
            min-height: 100vh; /* 占满整个视口高度 */
        }

        .sidebar {
            flex: 0 0 250px; /* 固定宽度的侧边栏 */
            background-color: #333;
            color: #fff;
            padding: 20px;
            box-sizing: border-box; /* 包括内边距在内计算宽度 */
        }

        .sidebar ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .sidebar li {
            margin-bottom: 15px;
        }

        .sidebar a {
            color: #fff;
            text-decoration: none;
        }

        .content {
            flex: 1; /* 主内容区域占据剩余空间 */
            padding: 20px;
            background-color: #f4f4f4;
        }

        /* 响应式样式 */
        @media (max-width: 768px) {
            .container {
                flex-direction: column; /* 在移动设备上垂直排列 */
            }

            .sidebar {
                flex: 0 0 auto; /* 在移动设备上自动适应高度 */
                display: none; /* 默认隐藏侧边栏 */
            }

            .content {
                flex: 1 0 auto;
            }

            .sidebar-toggle {
                display: block; /* 显示切换菜单按钮 */
                background-color: #333;
                color: #fff;
                padding: 10px;
                text-align: center;
                cursor: pointer;
            }
        }

        /* 显示侧边栏的样式 */
        .sidebar.active {
            display: block; /* 当侧边栏激活时显示 */
        }

    </style>
</head>
<body>
<div class="container">
    <aside class="sidebar">
        <ul>
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Logout</a></li>
        </ul>
    </aside>
    <main class="content">
        <h1>Main Content Area</h1>
        <p>This is the main content area where you can add your content.</p>
    </main>
</div>

</body>
</html>

导航栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式导航栏</title>
    <style>
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #333;
        }

        .logo {
            color: #fff;
            font-size: 1.5rem;
        }

        .nav-links {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .nav-links li {
            margin-left: 20px;
        }

        .nav-links a {
            color: #fff;
            text-decoration: none;
        }

        @media (max-width: 768px) {
            .nav-links {
                flex-direction: column;
                align-items: center;
            }

            .nav-links li {
                margin: 10px 0;
            }
        }
    </style>
</head>
<body>
<nav class="navbar">
    <div class="logo">Logo</div>
    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

</body>
</html>

分屏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex Layout Tab</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            display: flex;
        }

        .container {
            display: flex;
            justify-content: space-between;  /* 在水平上分布元素 */
            align-items: stretch;            /* 项目在垂直方向上拉伸，充满父容器 */
            width: 100%;
            height: 100%;
            background-color: #f0f0f0;
        }

        .item {
            flex-grow: 1;                   /* 使每个item在水平方向上均匀拉伸 */
            margin: 10px;
            background-color: #4caf50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>
</body>
</html>

卡片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品卡片布局</title>
    <style>
        .product-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .product-card {
            flex: 1 1 calc(33.333% - 20px); /* 计算每个卡片宽度 */
            background-color: #f5f5f5;
            padding: 20px;
            text-align: center;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        @media (max-width: 768px) {
            .product-card {
                flex: 1 1 calc(50% - 20px);
            }
        }

        @media (max-width: 480px) {
            .product-card {
                flex: 1 1 100%;
            }
        }
    </style>
</head>
<body>
<div class="product-grid">
  <div class="product-card">Product 1</div>
  <div class="product-card">Product 2</div>
  <div class="product-card">Product 3</div>
  <div class="product-card">Product 4</div>
  <div class="product-card">Product 5</div>
  <div class="product-card">Product 6</div>
</div>

</body>
</html>

新闻1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .news-list {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .news-item {
      display: flex;
      flex: 1 1 calc(50% - 20px); /* 每个新闻项目占父容器宽度的50% */
      background-color: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 5px;
      overflow: hidden;
    }

    .news-item img {
      width: 150px;
      height: auto;
      object-fit: cover;
    }

    .news-content {
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .news-content h2 {
      font-size: 1.2rem;
      margin: 0 0 10px;
    }

    .news-content p {
      font-size: 0.9rem;
      margin: 0 0 10px;
    }

    .news-content .date {
      font-size: 0.8rem;
      color: #666;
    }

    @media (max-width: 768px) {
      .news-item {
        flex: 1 1 100%; /* 在窄屏设备上每行显示一个新闻项目 */
      }

      .news-item img {
        width: 100%; /* 图片在窄屏设备上全宽显示 */
      }
    }

  </style>
</head>
<body>
<div class="news-list">
  <div class="news-item">
    <img src="favicon.ico" alt="News 1">
    <div class="news-content">
      <h2>News Title 1</h2>
      <p>This is a brief summary of news 1. It provides a quick overview of the content.</p>
      <span class="date">August 28, 2024</span>
    </div>
  </div>
  <div class="news-item">
    <img src="favicon.ico" alt="News 2">
    <div class="news-content">
      <h2>News Title 2</h2>
      <p>This is a brief summary of news 2. It provides a quick overview of the content.</p>
      <span class="date">August 27, 2024</span>
    </div>
  </div>
  <!-- More news items... -->
</div>
</body>
</html>

新闻2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="news-list">
    <div class="news-item">
        <div class="thumbnail"><img src="../statics/favicon.ico" alt=""></div>
        <div class="description">描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容</div>
        <button class="read-more">阅读更多</button>
    </div>
    <!-- 添加更多新闻项目 -->
</div>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .news-list {
        display: flex;
        flex-direction: column;
    }

    .news-item {
        display: flex;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #ccc;
    }

    .thumbnail {
        width: 100px; /* 设置缩略图的宽度 */
        height: 100px; /* 设置缩略图的高度 */
        margin-right: 10px; /* 设置缩略图与描述之间的间距 */
    }

    .thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 确保图片铺满缩略图容器 */
    }

    .description {
        flex: 1; /* 让描述部分占据剩余空间 */
        /* 其他样式，比如文字大小、颜色等 */
    }

    .read-more {
        /* 按钮样式 */
    }


</style>
</html>

新闻3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="news-list">
    <div class="news-item">
        <div class="thumbnail"><img src="../statics/favicon.ico" alt=""></div>
        <div class="description">描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容</div>
        <button class="read-more">阅读更多</button>
    </div>
    <!-- 添加更多新闻项目 -->
</div>



</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .news-list {
        display: flex;
        flex-direction: column;
    }

    .news-item {
        display: flex;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #ccc;
        /*height: 150px; !* 设置新闻项目的高度 *!*/
    }

    .thumbnail {
        width: auto; /* 自动适应图片宽度 */
        margin-right: 10px; /* 设置缩略图与描述之间的间距 */
        overflow: hidden; /* 隐藏超出部分 */
    }

    .thumbnail img {
        width: 56px; /* 图片宽度100% */
        max-height: 100vh; /* 图片最大高度100%，确保不超出.news-item的高度 */
        object-fit: cover; /* 确保图片铺满缩略图容器 */
    }

    .description {
        flex: 1; /* 让描述部分占据剩余空间 */
        /* 其他样式，比如文字大小、颜色等 */
    }

    .read-more {
        /* 按钮样式 */
    }


</style>
</html>

新闻4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="news-list">
    <div class="news-item">
        <div class="thumbnail"><img src="../statics/favicon.ico" alt=""></div>
        <div class="description">描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容描述内容</div>
        <button class="read-more">阅读更多</button>
    </div>
    <!-- 添加更多新闻项目 -->
</div>



</body>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .news-list {
        display: flex;
        flex-direction: column;
    }

    .news-item {
        display: flex;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #ccc;
        height: 150px; /* 设置新闻项目的高度 */
    }

    .thumbnail {
        flex: 0 0 auto; /* 自动适应图片宽度 */
        margin-right: 10px; /* 设置缩略图与描述之间的间距 */
        overflow: hidden; /* 隐藏超出部分 */
        height: 100%;
    }

    .thumbnail img {
        width: 100%; /* 图片宽度100% */
        height: 100%; /* 图片最大高度100%，确保不超出.news-item的高度 */
        object-fit: cover; /* 确保图片铺满缩略图容器 */
    }

    .description {
        flex: 1; /* 让描述部分占据剩余空间 */
        /* 其他样式，比如文字大小、颜色等 */
    }

    .read-more {
        /* 按钮样式 */
    }


</style>
</html>

优惠券

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物搜券查优惠</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
            text-align: center;
        }
        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .header .icons {
            display: flex;
            align-items: center;
        }
        .header .icons img {
            height: 30px;
            margin-left: -10px; /* 使图标重叠 */
            border-radius: 50%; /* 使图标变圆 */
            border: 2px solid white; /* 给图标加上白色边框 */
        }
        .header .icons img:first-child {
            margin-left: 0;
        }
        .header .time {
            font-size: 16px;
            color: #333;
        }
        .title {
            font-size: 20px;
            font-weight: bold;
            margin-top: 10px;
        }
        .guide {
            font-size: 14px;
            color: #777;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .guide img {
            height: 20px;
            vertical-align: middle;
        }
        .guide .arrow {
            margin: 0 5px;
            color: #ff7d00;
        }
        .search-box {
            margin-top: 20px;
        }
        .search-box input {
            width: calc(100% - 40px);
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 16px;
        }
        .search-box button {
            margin-top: 10px;
            width: 100%;
            padding: 10px;
            background-color: #ff7d00;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
        .search-box button:hover {
            background-color: #e56c00;
        }
        .video-tutorial {
            margin-top: 10px;
            text-align: right;
        }
        .video-tutorial a {
            color: #ff7d00;
            text-decoration: none;
            font-size: 14px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="header">
        <div class="icons">
            <img src="icon1.png" alt="Icon 1">
            <img src="icon2.png" alt="Icon 2">
            <img src="icon3.png" alt="Icon 3">
            <img src="icon4.png" alt="Icon 4">
        </div>
        <div class="time">08:54</div>
    </div>
    <div class="title">购物搜券查优惠</div>
    <div class="guide">
        <img src="copy_icon.png" alt="复制商品链接">
        <span>复制商品链接</span>
        <span class="arrow">→</span>
        <img src="open_app_icon.png" alt="打开小程序">
        <span>打开小程序</span>
        <span class="arrow">→</span>
        <img src="search_icon.png" alt="搜券查优惠">
        <span>搜券查优惠</span>
    </div>
    <div class="search-box">
        <input type="text" placeholder="搜索商品链接/标题/关键词（长按粘贴）">
        <button>搜券查优惠</button>
    </div>
    <div class="video-tutorial">
        <a href="#">视频教程 ></a>
    </div>
</div>

</body>
</html>

圣杯布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex 圣杯布局</title>
    <link rel="stylesheet" href="styles.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container">
    <header class="header">
        <div class="logo">
            <i class="fas fa-assistive-listening-systems"></i> <!-- 示例图标 -->
            HTTP Assistant
        </div>
        <div class="tabs">Left Tabs</div>
        <div class="right-tabs">Right Tabs</div>
    </header>
    <div class="body">
        <nav class="nav">Navigation</nav>
        <div class="divider"></div> <!-- 新增分隔条 -->
        <main class="main">Main Content</main>
        <aside class="aside">Aside Content</aside>
    </div>
    <footer class="footer">Footer</footer>
</div>

<script src="http.js"></script> <!-- 引入 JavaScript 文件 -->
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.header {
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 在主轴方向（水平）上分散对齐 */
    align-items: center; /* 垂直方向居中对齐 */
    background-color: #f1f1f1;
    padding: 10px;
}

.logo {
    display: flex;
    align-items: center; /* 垂直居中 */
    background-color: #ff6d70; /* 橙色背景 */
    color: white; /* 白色字体 */
    padding: 5px 10px;
    border-radius: 5px; /* 添加圆角 */
    font-size: 18px; /* 字体大小 */
    font-weight: bold; /* 粗体 */
}

.tabs {
    flex: 1; /* 占据中间可用的剩余空间 */
    display: flex;
    justify-content: center; /* 水平居中对齐 */
}

.right-tabs {
    flex: 0 0 auto; /* 固定宽度，不允许伸缩 */
}

.body {
    display: flex;
    flex: 1;
    position: relative; /* 为了使绝对定位的分隔条能够在 body 内自由拖动 */
}

.nav {
    background-color: #ddd;
    flex: 0 0 200px; /* 初始宽度为 200px */
    padding: 10px;
}

.divider {
    width: 1px; /* 分隔条的宽度 */
    background-color: #888;
    cursor: ew-resize; /* 鼠标指针样式为左右拖动 */
    position: relative;
}

.main {
    background-color: #bbb;
    flex: 1;
    padding: 10px;
}

.aside {
    background-color: #ccc;
    flex: 0 0 200px; /* 初始宽度为 200px */
    padding: 10px;
}

.footer {
    background-color: #f1f1f1;
    text-align: center;
    padding: 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const divider = document.querySelector('.divider');
const nav = document.querySelector('.nav');
const main = document.querySelector('.main');

let isDragging = false;

divider.addEventListener('mousedown', function(e) {
    isDragging = true;
    document.body.style.cursor = 'ew-resize'; // 修改鼠标指针样式
});

document.addEventListener('mousemove', function(e) {
    if (!isDragging) return;

    // 计算新的 nav 宽度
    const newNavWidth = e.clientX - nav.getBoundingClientRect().left;

    // 设置 nav 和 main 的宽度
    nav.style.flex = `0 0 ${newNavWidth}px`;
    main.style.flex = `1`; // main 占据剩余空间
});

document.addEventListener('mouseup', function() {
    isDragging = false;
    document.body.style.cursor = 'default'; // 恢复鼠标指针样式
});

当我遇上你

勿在浮沙筑高楼