Chrome 开发者工具里的 CSS grid editor-阿里云开发者社区

开发者社区> jerrywangsap> 正文

Chrome 开发者工具里的 CSS grid editor

简介: Chrome 开发者工具里的 CSS grid editor
+关注继续查看

Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。


Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。


看个具体的例子:


image.png

image.png

效果如下:


image.png

当页面上的 HTML 元素应用了 display: grid 或 display: inline-grid 时,您可以在“样式”窗格中看到它旁边出现一个图标。 单击该图标可切换 CSS 网格编辑器。 在这里,您可以使用屏幕图标(例如 justify-content: space-around)预览潜在的变化,只需单击一下即可创作网格外观。

image.png


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

相关文章
13个最常用的CSS和HTML快速开发工具
1)CleverCSS CleverCSS是个为CSS开发而产生的小型的标记语言,它的设计灵感来自Python,使得能够以一种简洁、结构化的方式构建样式表。在很多方面,它比CSS2更加爱简洁和强大。
1156 0
[译]15个关于Chrome的开发必备小技巧
谷歌Chrome,是当前最流行且被众多web开发人员使用的浏览器。最快六周就更新发布一次以及伴随着它不断强大的开发组件,使得Chrome成为你必备的开发工具。例如,在线编辑CSS,console以及debugger这些常用的调试技术,或许你已经了解。
6128 0
Python 开发工具集:关于文档、测试、调试、程序的优化和分析
Python已经演化出了一个广泛的生态系统,该生态系统能够让Python程序员的生活变得更加简单,减少他们重复造轮的工作。同样的理念也适用于工具开发者的工作,即便他们开发出的工具并没有出现在最终的程序中。本文将介绍Python程序员必知必会的开发者工具。
18 0
+关注
2628
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载