html之flex伸缩盒子；grid布局

flex伸缩盒子

利用flex伸缩盒子可以把父级下的div的换行去掉,排列在一行中
demo来自微信小程序

先将父级div定义成伸缩盒子,然后子级每份占据1份父类空间

flex简述

flex中三个属性；在后端看来这是flex构造方法的3个入参

flex:<flex-grow><flex-shrink><flex-basis>

分别代表的意思

常用快速值

flex-grow代表的是是否瓜分剩余空间

为0代表浏览器不会把剩余空间分配出去；即按照内容本身长度分配;

为1时代表把剩下内容的长度再分配出去;
ps:平均分的是剩余空间，不是整个容器

flex-shrink（空间不足时是否缩小）

这个很好理解，就是内容加起来的长度超过了容器长度，之后会按比例压缩每个元素，让内容可以塞进去；如果不压缩，那么就会出现滚动条；

这个压缩其实分摊多出来的那一部分;
比如多出来100px;
按比例分摊这100px（在原先元素的width上减去）

ps:当shrink相同时,减法结果和按比例乘积结果相同； 以下面的demo为例 A压缩结果= 200 - (200/1200)*120=180 B压缩结果= 200 - (400/1200)*120=160 C压缩结果= 200 - (600/1200)*120=140 但当shrink相同时，比如都为1，那么其实压缩结果就是按当前元素的width*(当前元素的width的占比),正好和这个比例一致了 总权重 = 200*1 + 200*1 + 200*1=600 A压缩结果= 200 - (200/600)*120=200*(1-(120/600)) B压缩结果= 200 - (200/600)*120=200*(1-(120/600)) C压缩结果= 200 - (200/600)*120=200*(1-(120/600))

flex-basis（初始尺寸）

这个很好理解，就是给了一个初始值;
但这里的初始值是指在参与flex计算的尺寸，和css中的width不是一个概念;

比如 flex:0 = flex:0 1 0%;

代表在flex容器计算尺寸时，先当成0，然后让浏览器分配尺寸;

grid布局

flex只是一维的，grid则是二维的；
大白话说flex是一个动态行，grid则是一个有列和行的表格;

我理解在外层容器开启grid，并且定义好列后，内部的元素会自动按照指定列的数量自动排列存放;

这里先简单描述下几个参数
fr（Fraction）：它类似于Flex 的 grow，用于控制列的宽度比例。grid-template-columns: 1fr 1fr 1fr;
gap: 控制列之间的距离;类似margin;row-gap:20px; column-gap:40px;

定义3列，并且每列等分容器宽度

<divclass="container"><div>A</div><div>B</div><div>C</div></div>.container{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; } .container>div{ background:#87ceeb; height:80px; }

demo2固定宽度+动态分配

.container{ display:grid; grid-template-columns: 240px 1fr; }<divclass="container"><div>菜单</div><div>内容</div></div>

grid repeat()用法
repeat就是字面重复意思

比如下面2个demo

.container{ display:grid; grid-template-columns: repeat(3,1fr);<!--这个就是单元格之间的距离(不是内容,是单元格边框之间)-->gap:20px; } .container{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:20px; }

跨列/跨行(合并单元格)

.order{<!--这两个写法都可以上下合并单元格;但实际这个更符合语意-->grid-row: span 3;<!--这个写法是从左边起始单元格的第一根边框线开始到第4根边框钱线中间合并-->grid-row:1 / 4;<!--从当前位置开始左右2个单元格合并-->grid-column:span 2; }

跨行合并，demo中就是订单号所在的3行合并单元格;