html之flex伸缩盒子；grid布局
flex伸缩盒子
利用flex伸缩盒子可以把父级下的div的换行去掉,排列在一行中
demo来自微信小程序
先将父级div定义成伸缩盒子,然后子级每份占据1份父类空间
flex简述
flex中三个属性；在后端看来这是flex构造方法的3个入参
flex:<flex-grow><flex-shrink><flex-basis>分别代表的意思
| 属性 | 作用 | 默认值 |
|---|---|---|
| flex-grow | 有剩余空间时，是否放大 | 0 |
| flex-shrink | 空间不足时，是否缩小 | 1 |
| flex-basis | 初始尺寸 | auto |
常用快速值
| 写法 | 实际等价 | grow | shrink | basis | 典型用途 |
|---|---|---|---|---|---|
flex: initial | 0 1 auto | 0 | 1 | auto | 默认值；不主动放大，可以缩小，初始宽度按 width 或内容决定 |
flex: auto | 1 1 auto | 1 | 1 | auto | 内容优先，再伸缩;即有空间就长大，不够就缩小，初始宽度按内容（或 width） |
flex: none | 0 0 auto | 0 | 0 | auto | 完全固定大小 |
flex: 0 | 0 1 0% | 0 | 1 | 0% | 很少单独使用;特殊简写只有一个数字，那么它表示 grow，basis 自动变成 0%。这里的basis=0%是将在参与flex计算时的初始尺寸当成0，并不是css中的width概念 |
flex: 1 | 1 1 0% | 1 | 1 | 0% | 最常用，平均分配剩余空间 |
flex: 2 | 2 1 0% | 2 | 1 | 0% | 按比例分配剩余空间 |
flex: 0 0 200px | 0 0 200px | 0 | 0 | 200px | 固定宽度（卡片、侧边栏等） |
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行合并单元格;