html之flex伸缩盒子；grid布局

flex伸缩盒子利用flex伸缩盒子可以把父级下的div的换行去掉,排列在一行中demo来自微信小程序先将父级div定义成伸缩盒子,然后子级每份占据1份父类空间flex简述flex中三个属性在后端看来这是flex构造方法的3个入参flex:flex-growflex-shrinkflex-basis分别代表的意思属性作用默认值flex-grow有剩余空间时是否放大0flex-shrink空间不足时是否缩小1flex-basis初始尺寸auto常用快速值写法实际等价growshrinkbasis典型用途flex: initial0 1 auto01auto默认值不主动放大可以缩小初始宽度按 width 或内容决定flex: auto1 1 auto11auto内容优先再伸缩;即有空间就长大不够就缩小初始宽度按内容或 widthflex: none0 0 auto00auto完全固定大小flex: 00 1 0%010%很少单独使用;特殊简写只有一个数字那么它表示 growbasis 自动变成 0%。这里的basis0%是将在参与flex计算时的初始尺寸当成0并不是css中的width概念flex: 11 1 0%110%最常用平均分配剩余空间flex: 22 1 0%210%按比例分配剩余空间flex: 0 0 200px0 0 200px00200px固定宽度卡片、侧边栏等flex-grow代表的是是否瓜分剩余空间为0代表浏览器不会把剩余空间分配出去即按照内容本身长度分配;为1时代表把剩下内容的长度再分配出去;ps:平均分的是剩余空间不是整个容器flex-shrink空间不足时是否缩小这个很好理解就是内容加起来的长度超过了容器长度之后会按比例压缩每个元素让内容可以塞进去如果不压缩那么就会出现滚动条这个压缩其实分摊多出来的那一部分;比如多出来100px;按比例分摊这100px在原先元素的width上减去ps:当shrink相同时,减法结果和按比例乘积结果相同 以下面的demo为例 A压缩结果 200 - (200/1200)*120180 B压缩结果 200 - (400/1200)*120160 C压缩结果 200 - (600/1200)*120140 但当shrink相同时比如都为1那么其实压缩结果就是按当前元素的width*(当前元素的width的占比),正好和这个比例一致了 总权重 200*1 200*1 200*1600 A压缩结果 200 - (200/600)*120200*(1-(120/600)) B压缩结果 200 - (200/600)*120200*(1-(120/600)) C压缩结果 200 - (200/600)*120200*(1-(120/600))flex-basis初始尺寸这个很好理解就是给了一个初始值;但这里的初始值是指在参与flex计算的尺寸和css中的width不是一个概念;比如 flex:0 flex:0 1 0%;代表在flex容器计算尺寸时先当成0然后让浏览器分配尺寸;grid布局flex只是一维的grid则是二维的大白话说flex是一个动态行grid则是一个有列和行的表格;我理解在外层容器开启grid并且定义好列后内部的元素会自动按照指定列的数量自动排列存放;这里先简单描述下几个参数frFraction它类似于Flex 的 grow用于控制列的宽度比例。grid-template-columns: 1fr 1fr 1fr;gap: 控制列之间的距离;类似margin;row-gap:20px; column-gap:40px;定义3列并且每列等分容器宽度divclasscontainerdivA/divdivB/divdivC/div/div.container{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; } .containerdiv{ background:#87ceeb; height:80px; }demo2固定宽度动态分配.container{ display:grid; grid-template-columns: 240px 1fr; }divclasscontainerdiv菜单/divdiv内容/div/divgrid 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行合并单元格;