html flex布局

作者：淺墨发布日期:2025-10-01 浏览:43

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Flex布局示例</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between; /* 水平分布：两端对齐 */
            align-items: center; /* 垂直居中对齐 */
            height: 200px; /* 设置容器高度 */
            background-color: #f0f0f0; /* 背景颜色 */
        }

        .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>
</body>
</html>

解释说明：

HTML结构:
- container 是一个包含三个子元素的父级容器。
- 每个子元素（item）是一个 100x100 像素的方块，带有编号。
CSS样式:
- .container 使用了 display: flex 来启用 Flexbox 布局。
- justify-content: space-between 使子元素在水平方向上两端对齐。
- align-items: center 使子元素在垂直方向上居中对齐。
- height: 200px 设置了容器的高度。
- .item 定义了每个子元素的宽度、高度、背景颜色和文本样式。

上一篇：html水平居中

下一篇：html中的空格标记