在css中，grid布局指的是“网格布局”，是一个二维系统，可以同时处理行和列，可以通过将css规则用于父元素和该元素的子元素来使用网格布局；而flex布局指的是“弹性布局”，是一个一维系统，用来为盒状模型提供最大的灵活性。
本文操作环境：windows10系统、css3、thinkpad t480电脑。
（推荐教程：CSS视频教程）
一、flex布局简介
flex是flexible box（弹性布局）的简介，是一个一维系统，用来为盒状模型提供最大的灵活性。
立即学习“前端免费学习笔记（深入）”；
使用：任何容器（行内元素可设置为display:inline-block）;
特点：空间分布在行中进行，而非整体
二、grid布局简介
Gird Layout(css网格布局)是css中最强大的布局系统，是一个二维系统，可以同时处理行和列，可以通过将css规则用于父元素（网格容器）和该元素的子元素（网格元素）来使用网格布局。
使用：对父元素设置dispay：grid;grid-template-colums和grid-template-rows来设置几行几列，然后对子元素设置占据几行几列
特点：二维网格结构，十分便于操作
实战一：用grid布局做一个简单的九宫格
html代码：
css代码：
.box{ width: 1200px; height: 80vh; display: grid; // 开启grid布局 grid-template-columns: repeat(3,30%); // 设置列 grid-template-rows: repeat(3,30%); // 设置行 grid-column-gap: 20px; // 设置网格之间的间距 grid-row-gap: 20px; // 设置网格之间的间距}.box div{ background-color: #34ce57;}
实战二：做一个常用的网站布局
html代码：
headerleftcenterright
css代码：
.box { width: 1200px; height: 80vh; display: grid; // 开启grid布局 grid-template-rows: 10% 80% 10%; // 设置行数}.header { background-color: #6ac13c; display: grid; /*居中*/ align-content: center; justify-content: center;}.content { /*background-color: #f1b0b7;*/ display: grid; grid-template-columns: 10% 80% 10%; grid-gap: 20px; // 网格之间的间隔}.footer { background-color: #ffc107; display: grid; align-items: center; justify-content: center;}.left { background-color: #5599FF;}.center { background-color: lightgreen;}.right { background-color: orchid;}
更多编程相关知识，请访问：编程视频！！
以上就是css grid布局和flex布局是什么?的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1616686.html
微信扫一扫 
支付宝扫一扫 
