css-flexbox-grid

CSS Flexbox 与 Grid 技能

掌握现代 CSS 布局系统：Flexbox 用于一维布局，CSS Grid 用于二维布局。

概述

此技能提供关于 CSS 布局技术的精炼、专注指导，并包含全面的参数验证和实用示例。

技能元数据

属性	值
类别	布局
复杂度	中级到高级
依赖项	css-fundamentals
绑定的 Agent	02-css-layout-master

用法

Skill("css-flexbox-grid")

参数架构

parameters:
  layout_type:
    type: string
    required: true
    enum: [flexbox, grid, comparison, responsive]
    description: Layout system to explore

  pattern:
    type: string
    required: false
    enum: [centering, sidebar, card-grid, holy-grail, navbar, gallery]
    description: Common layout pattern

  include_responsive:
    type: boolean
    required: false
    default: true
    description: Include responsive adaptations

validation:
  - rule: layout_type_required
    message: "layout_type parameter is required"
  - rule: valid_pattern
    message: "pattern must be a recognized layout pattern"

涵盖主题

Flexbox

• 容器属性：display、flex-direction、flex-wrap
• 对齐：justify-content、align-items、align-content
• 项目属性：flex-grow、flex-shrink、flex-basis
• 间距、顺序和自身对齐

CSS Grid

• 网格模板：列、行、区域
• 网格放置：网格线、跨越、命名区域
• auto-fit、auto-fill、minmax()
• 子网格和砌体布局（视支持情况而定）

响应式模式

• 移动优先的方法
• 断点策略
• 容器查询集成
• 使用 clamp() 实现流式布局

重试逻辑

retry_config:
  max_attempts: 3
  backoff_type: exponential
  initial_delay_ms: 1000
  max_delay_ms: 10000
  retryable_errors:
    - TIMEOUT
    - RATE_LIMIT

日志与可观测性

logging:
  entry_point: skill_invoked
  exit_point: skill_completed
  log_parameters: true
  metrics:
    - invocation_count
    - pattern_usage
    - layout_type_distribution

快速参考

Flexbox 速查表

.container {
  display: flex;
  flex-direction: row;      /* row | column | row-reverse | column-reverse */
  flex-wrap: wrap;          /* nowrap | wrap | wrap-reverse */
  justify-content: center;  /* flex-start | flex-end | center | space-between | space-around | space-evenly */
  align-items: center;      /* flex-start | flex-end | center | stretch | baseline */
  gap: 1rem;
}

.item {
  flex: 1 1 auto;          /* grow shrink basis */
  align-self: flex-start;
  order: 0;
}

Grid 速查表

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  gap: 1rem;
}

.item {
  grid-column: 1 / 3;      /* start / end */
  grid-row: span 2;
  grid-area: header;
}

决策矩阵

Need 2D control?
├─ YES → CSS Grid
└─ NO
    ├─ Content determines size? → Flexbox
    ├─ Equal sizing needed? → Grid
    └─ Simple row/column → Flexbox

常见模式

居中任意内容

/* Flexbox centering */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid centering */
.grid-center {
  display: grid;
  place-items: center;
}

响应式卡片网格

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

侧边栏布局

.sidebar-layout {
  display: grid;
  grid-template-columns: minmax(200px, 25%) 1fr;
  min-height: 100vh;
}

@media (max-width: 768px) {
  .sidebar-layout {
    grid-template-columns: 1fr;
  }
}

测试模板

describe('CSS Flexbox Grid Skill', () => {
  test('validates layout_type parameter', () => {
    expect(() => skill({ layout_type: 'invalid' }))
      .toThrow('layout_type must be one of: flexbox, grid...');
  });

  test('returns flexbox properties for flexbox type', () => {
    const result = skill({ layout_type: 'flexbox' });
    expect(result).toContain('display: flex');
    expect(result).toContain('justify-content');
  });

  test('includes responsive code when flag is true', () => {
    const result = skill({
      layout_type: 'grid',
      pattern: 'card-grid',
      include_responsive: true
    });
    expect(result).toContain('@media');
  });
});

错误处理

错误代码	原因	恢复方法
INVALID_LAYOUT_TYPE	未知布局类型	显示有效选项
INCOMPATIBLE_PATTERN	模式与布局类型不兼容	建议替代方案
MISSING_DEPENDENCY	尚未理解基础知识	链接到 css-fundamentals

相关技能

• css-fundamentals（前置条件）
• css-modern（容器查询）
• css-architecture（组件布局模式）