Flex 布局基础

1. Flex 容器设置

    
Item 1
    
Item 2
    
Item 3



行布局
列布局


允许换行
禁止换行

2. 主轴对齐

左对齐
居中对齐
右对齐
两端对齐
环绕对齐
均匀对齐

3. 交叉轴对齐

顶部对齐
居中对齐
底部对齐
拉伸对齐
基线对齐

Flex 实战案例

1. 导航栏布局

2. 卡片网格布局

    
    

        

            
            

                
卡片标题
                
卡片描述内容
            
        
    
    

Grid 布局基础

1. Grid 容器设置

    
Item 1
    
Item 2
    
Item 3




    

2. 网格列配置

    
跨越4列
    
跨越8列




    

Grid 实战案例

1. 图片画廊

    
    

        
        

            查看详情
        
    
    

2. 仪表板布局

    
    

        
总收入
        

            
$23,456
            
+14%
        
    
    

混合布局技巧

1. Flex 和 Grid 结合

    
    

        
标题
        
描述文本
        

            按钮1
            按钮2
        
    

    
    

        
特性 1
        
特性 2
        
特性 3
        
特性 4
    

2. 响应式布局切换

    
    
内容 1
    
内容 2
    
内容 3

高级布局技巧

1. 自适应布局

2. 特殊布局效果

    
大图
    
小图 1
    
小图 2
    

最佳实践

1. 性能考虑

• 避免过度嵌套
• 合理使用 Gap
• 优化响应式断点

2. 可维护性建议

• 组件化布局结构
• 保持命名一致性
• 注意代码复用

3. 响应式设计

• 移动优先原则
• 断点选择策略
• 内容适配考虑

总结

Tailwind CSS 的 Flex 和 Grid 布局系统提供了：

1. 灵活的布局控制
2. 强大的响应式能力
3. 丰富的对齐选项
4. 简洁的语法表达

在实际开发中，应该：

1. 根据内容选择合适的布局系统
2. 灵活运用混合布局策略
3. 注重响应式体验
4. 维护代码可读性和可维护性