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

本文介绍了CSS中的Grid布局和Flex布局。Grid布局是一个二维系统,方便处理行和列,通过设置父元素和子元素的CSS规则创建网格。Flex布局则是一维系统,主要用于盒状模型的灵活布局。文中通过实例展示了如何使用Grid制作九宫格和常见网站布局。
摘要由CSDN通过智能技术生成

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



(推荐教程:CSS视频教程)

一、flex布局简介

flex是flexible box(弹性布局)的简介,是一个一维系统,用来为盒状模型提供最大的灵活性。

使用:任何容器(行内元素可设置为display:inline-block);

特点:空间分布在行中进行,而非整体

二、grid布局简介

Gird Layout(css网格布局)是css中最强大的布局系统,是一个二维系统,可以同时处理行和列,可以通过将css规则用于父元素(网格容器)和该元素的子元素(网格元素)来使用网格布局。

使用:对父元素设置dispay:grid;grid-template-colums和grid-template-rows来设置几行几列,然后对子元素设置占据几行几列

特点:二维网格结构,十分便于操作

实战一:用grid布局做一个简单的九宫格

html代码:

1

2

3

4

5

6

7

8

9

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值