在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
css grid布局和flex布局是什么?
最新推荐文章于 2024-07-11 16:02:06 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)