Rumah > hujung hadapan web > tutorial css > css grid布局和flex布局是什么?

css grid布局和flex布局是什么?

青灯夜游
Lepaskan: 2023-01-04 09:37:04
asal
4353 orang telah melayarinya

在css中,grid布局指的是“网格布局”,是一个二维系统,可以同时处理行和列,可以通过将css规则用于父元素和该元素的子元素来使用网格布局;而flex布局指的是“弹性布局”,是一个一维系统,用来为盒状模型提供最大的灵活性。

css grid布局和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代码:

<div class="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
Salin selepas log masuk

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;
}
Salin selepas log masuk

1.png

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

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>
Salin selepas log masuk

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;
}
Salin selepas log masuk

2.png

更多编程相关知识,请访问:编程视频!!

Atas ialah kandungan terperinci css grid布局和flex布局是什么?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan