Flexbox 弹性布局 - HTML & CSS 基础

← 返回课程HTML & CSS 基础 › 第 7 关

进度 0%

第 7 关：Flexbox 弹性布局

HTML/CSS入门

📖 本课目标

本关属于《HTML & CSS 基础》第 7 课。阅读右侧代码模板，理解每一行的作用，然后动手修改并完成练习。

🎯 本课要点

Flexbox 弹性布局
最常用的一维布局方式

🛠 学习方式

阅读右侧代码模板中的注释与实现
修改代码，尝试达成新的效果
点击「运行」查看实际输出
确认理解后点击「提交」标记本关完成

💡 说明

本关为 HTML/CSS，浏览器内无法真正执行该语言。当前「运行」输出为演示结果，请在本地环境中编译运行以验证代码。

main.pytest.py

# Flexbox 弹性布局
# 最常用的一维布局方式

def demo_flex():
    print("=== Flexbox 布局 ===\n")
    
    # 模拟 flex 容器
    items = ["导航", "内容区域", "侧边栏", "页脚"]
    
    print("flex-direction: row（水平排列）")
    print("┌──────┬──────────────┬────────┬──────┐")
    for item in items:
        print(f"│ {item:^6}", end="")
    print("│")
    print("└──────┴──────────────┴────────┴──────┘")
    
    print("\nflex-direction: column（垂直排列）")
    for item in items:
        print(f"┌────────────────────┐")
        print(f"│ {item:^18} │")
        print(f"└────────────────────┘")

demo_flex()

# Flexbox CSS 示例
css = """
/* 导航栏 - 水平排列，两端对齐 */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #667eea;
}

/* 卡片列表 - 自动换行 */
.card-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.card-list .card {
    flex: 1 1 300px;  /* 最小 300px，自动填满 */
}

/* 垂直居中 */
.center-content {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* 圣杯布局 */
.holy-grail {
    display: flex;
    flex-direction: column;
}
.holy-grail .main {
    display: flex;
    flex: 1;
}
.holy-grail .content { flex: 1; }
.holy-grail .sidebar { width: 200px; }
"""
print("\n" + css)

# 常用属性速查
print("--- Flex 属性速查 ---")
props = [
    "justify-content: flex-start | center | space-between | space-around",
    "align-items:     flex-start | center | stretch | baseline",
    "flex-direction:  row | column | row-reverse | column-reverse",
    "flex-wrap:       nowrap | wrap",
    "flex:            grow shrink basis (如 flex: 1)",
    "gap:             16px (元素间距)"
]
for p in props:
    print(f"  {p}")

点击「运行」或「提交代码」查看结果

📖 查看本课说明

第 7 关：Flexbox 弹性布局

HTML/CSS · 入门 · 《HTML & CSS 基础》

Flexbox 弹性布局
最常用的一维布局方式

本关为 HTML/CSS，浏览器无法真正编译运行，请在本地环境验证代码。