发布时间:2019-08-02责任编辑:满帅 浏览:2984
一、flex布局简介(弹性布局)
flex是flexible box(弹性布局)的简介,是一个一维系统,用来为盒状模型提供最大的灵活性。
使用:任何容器(行内元素可设置为display:inline-block);
特点:空间分布在行中进行,而非整体
二、grid布局简介(二维布局)
Gird Layout(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;然后再给小盒子起名字,小盒子就会占据对应的区域。
设计组供稿