css中grid布局和flex布局指的是什么

这篇文章给大家分享的是有关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代码：

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;
}

css中grid布局和flex布局指的是什么

实战二：做一个常用的网站布局

html代码：


    header

left

center

.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布局指的是什么

其他资讯