Grid布局和flex布局的区别
source link: https://blog.51cto.com/u_15723831/5853209
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Grid布局和flex布局的区别
精选 原创1. 什么是Grid布局
Grid布局及网格布局，是一种新的css模型，一般是将一个页面划分成几个主要的区域，定义这些区域的大小、位置和层次等关系，是目前唯一一种css二维布局。
2.什么是flex布局
flex 是 flexible Box 的缩写，意为 “弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
采用 flex 布局的元素，称为 flex 容器（flex container），它的所有子元素自动成为容器成员，称为 flex 项目（flex item）。 flex就是通过给父盒子添加flex属性，来控制子盒子的位置和排列等。
3. Grid布局和flex布局的区别
Grig布局和flex布局时有实质性的区别的，flex是一维布局，只能处理一个维度上的布局，一行或者是一列，但是Grid布局是二维布局，将容器划分成了“行”和”列”，产生了一个个的网格，可以将网格元素放在行和列相关的位置上，从而达到了布局的目的。
flex布局示例：
grid布局示例：
4. grid布局的概念
首先我们先看一个小例子，通过这个例子演示一些基础概念
运行结果：
容器和项目
我们通过再元素上声明display:grid或者display:inline-grid来创建一个容器网格，这个元素的所有直系3子元素将成为网格项目。
网格轨道
grid-template-columns和grid-template-rows属性来定义网格中的行和列
网格单元
一个网格单元是在一个网格元素中最小的单位，上图中One、Two、Three、Four…都是一个个的网格单元
网格线
划分网格的线即为网格线。需要注意的是，我们定义网格的时候，定义的是网格轨道。Grid会自动创建编号的网格线来定位每一个元素，m列有m+1根垂直的网格线，n行有n+1根水平网格线。一般而言，是从左到右，从上到下，1，2，3进行编号排序，从右到左，从下到上，则是按照-1，-2，-3…顺序进行编号排下序。
以上就是CRMEB讲解的关于Grid布局和flex布局的区别，有不懂的可以在下方留言，大家一起讨论学习。
- 1赞
- 收藏
- 评论
- 分享
- 举报
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK