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；然后再给小盒子起名字，小盒子就会占据对应的区域。