这篇文章给大家分享的是有关css中grid布局和flex布局指的是什么的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。
在css中，grid布局指的是“网格布局”，是一个二维系统，可以同时处理行和列，可以通过将css规则用于父元素和该元素的子元素来使用网格布局；而flex布局指的是“弹性布局”，是一个一维系统，用来为盒状模型提供最大的灵活性。
一、flex布局简介
flex是flexible box（弹性布局）的简介，是一个一维系统，用来为盒状模型提供最大的灵活性。
使用：任何容器（行内元素可设置为display:inline-block）;
特点：空间分布在行中进行，而非整体
二、grid布局简介
Gird Layout(css网格布局)是css中最强大的布局系统，是一个二维系统，可以同时处理行和列，可以通过将css规则用于父元素（网格容器）和该元素的子元素（网格元素）来使用网格布局。
使用：对父元素设置dispay：grid;grid-template-colums和grid-template-rows来设置几行几列，然后对子元素设置占据几行几列
特点：二维网格结构，十分便于操作
实战一：用grid布局做一个简单的九宫格
html代码：
计算
安全
数据库
网络和加速
企业服务
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>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代码：
<div class="box">
<div class="header">header</div>
<div class="content">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>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布局指的是什么就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
