js flex布局

作者：颠沛流离的伤发布日期:2026-04-21 浏览:69

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Flex布局示例</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between; /* 水平分布子元素 */
            align-items: center; /* 垂直居中对齐 */
            height: 200px; /* 设置容器高度 */
            background-color: #f0f0f0;
            padding: 10px;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            color: white;
            text-align: center;
            line-height: 100px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>

    <script>
        // 这里可以添加一些JavaScript代码来动态操作Flex布局，例如：
        // const container = document.querySelector('.container');
        // container.style.justifyContent = 'center'; // 改变水平对齐方式
    </script>
</body>
</html>

解释说明：

HTML结构:
- 使用了一个<div>容器，类名为container，内部包含三个子元素，每个子元素的类名为item。
CSS样式:
- .container使用了display: flex，使它成为一个弹性盒子容器。
- justify-content: space-between：使子元素在主轴（水平方向）上均匀分布。
- align-items: center：使子元素在交叉轴（垂直方向）上居中对齐。
- height: 200px：设置了容器的高度。
- .item定义了子元素的宽度、高度、背景颜色等样式。
JavaScript部分:
- 可以通过JavaScript动态修改Flex布局的属性，例如改变justifyContent的值来调整子元素的水平对齐方式。

上一篇：js 打开新的窗口

下一篇：js 获取滚动条高度