AI 助理
备案控制台
开发者社区 云原生 文章 正文

Flex 布局和 Grid 布局的区别

2024-07-02 18
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Flex 布局和 Grid 布局的区别

1. Flex 布局

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

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

2. Grid 布局

专注解决二位布局的

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

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

文章标签：
容器
关键词：
flex布局
yqcoder
目录
相关文章
孙飞i
|
8天前
|
前端开发
FLex布局详解
Flex布局通过`flex-direction`定义主轴方向，包括横向`row`、反向横向`row-reverse`、纵向`column`及反向纵向`column-reverse`。`justify-content`控制主轴上子元素的排列，如起始端`flex-start`、末端`flex-end`、居中`center`、等间距`space-around`或两端对齐`space-between`。在Y轴上设置这些同样有效。`flex-wrap: wrap`使子元素在需要时换行。`align-items: center`实现侧轴（交叉轴）上的居中对齐
孙飞i
18 1
FLex布局详解
我是快乐的嘟嘟
|
3天前
flex布局属性简介
flex布局属性简介
我是快乐的嘟嘟
105 57
阿福的工作室
|
4天前
|
容器
Flex 布局
Flex 布局
阿福的工作室
8 0
白如意i
|
5天前
|
前端开发 JavaScript API
如何在 Angular 中使用 Flex 布局
如何在 Angular 中使用 Flex 布局
白如意i
7 0
1941623231718325
|
1月前
|
编解码 前端开发 容器
CSS Flex布局实战案例：构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤，我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码，还让我们能够轻松实现复杂的布局效果，如响应式设计。在实战中，掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
1941623231718325
35 2
朝阳39
|
1月前
|
前端开发
css的flex布局中使用margin:auto智能分配剩余空间
css的flex布局中使用margin:auto智能分配剩余空间
朝阳39
30 1
G佳伟
|
1月前
|
小程序
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题：设置了word-break: break-all；和flex: 1；冲突flex不生效问题
【微信小程序】英文字母不换行问题 flex布局字符超出宽度折行问题：设置了word-break: break-all；和flex: 1；冲突flex不生效问题
G佳伟
22 1
jjczqyjxgdegi
|
2月前
|
容器
一篇文章讲明白flex布局
一篇文章讲明白flex布局
jjczqyjxgdegi
17 3
小z前端笔记
|
2月前
|
移动开发 前端开发 HTML5
深掘 CSS3 Flex 布局的奥秘：打造无界限的灵活页面布局
深掘 CSS3 Flex 布局的奥秘：打造无界限的灵活页面布局
小z前端笔记
21 1
朝阳39
|
1月前
|
前端开发
CSS 自测题 -- 用 flex 布局绘制骰子（一、二、三【含斜三点】、四、五、六点）
CSS 自测题 -- 用 flex 布局绘制骰子（一、二、三【含斜三点】、四、五、六点）
朝阳39
16 0