Flex 布局和 Grid 布局的区别

1. Flex 布局

专注解决一维布局，不管是横向还是纵向，它总能保证这个元素在这个容器里优雅的进行伸缩和对齐。

使用场景：1. 响应式导航。2. 卡片式布局。3. 队列布局

2. Grid 布局

专注解决二位布局的

应用场景：1. 复杂的网页布局。2. 多区域布局。3. 创意排版

总结：在实际开发中，可以结合这两种布局模式，实现更高效的响应式布局。比如我们可以使用 Grid 来规划页面的宏观结构，确定主区域的布局。再用 flex 来精细控制局部元素的对齐和分布。对响应式进行增强。