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

css中grid布局是什么?flex布局是什么?本篇文章将向你介绍grid布局和flex布局的基本概念,它们的核心思想,以及不同之处!感兴趣的同学一起来看看吧。

一、flex布局简介(弹性布局)

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

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

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

二、grid布局简介(二维布局)

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

使用:对父元素设置(推荐学习:CSS视频教程

dispay:grid;
grid-template-colums;
grid-template-rows;

来设置几行几列,然后对子元素设置占据几行几列

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

基本概念:

*container:网格容器,设置display:grid就将容器变成了网格容器
*item:网格项,指网格容器中每一个子元素
*line:网格线,网格之间的分界线
*track:网格轨道,两条相邻的网格线之间的空间(行或列)
*cell:网格单元,每个小网格
*area:网格区域,四条网格线包围起来的区域
*fr:在自由空间进行分配的一个单位

这两者的核心是:一个盒子里有很多小盒子,如何排列?

● flex就是沿着一条线铺下去,这个线可能水平,也可能垂直,这个平铺的方向用flex-direction来控制。

所以flex才有换行命令。而且当同级小盒子很多的时候,往往动一发而动全身,很不方便。

● grid是把盒子用线分成很多份,把小盒子一个个填进去。

如何把盒子分成很多份? grid-template-columns/grid-template-row

而要把小盒子准确的填进去,

grid有两种方法,一种是给分好的区域起名字。grid-template-areas;然后再给小盒子起名字,小盒子就会占据对应的区域。

相关推荐:

CSS Grid 布局完全指南(图解 Grid 详细教程)

5分钟学会 CSS Grid 布局

如何使用 CSS Grid 快速而又灵活的布局

更多CSS3相关技术文章,请访问CSS3答疑栏目进行学习!

以上就是css grid布局和flex布局是什么?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读