成都创新互联网站制作重庆分公司

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         right          footer

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

感谢各位的阅读!关于css中grid布局和flex布局指的是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!


网页题目:css中grid布局和flex布局指的是什么
地址分享:http://cxhlcq.com/article/jsodgp.html

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部