Html “试图复制布局”；“根据需要安装”；或；Ram"；对于IE 11，但项目在不应拉伸的情况下被拉伸
我试图复制这种布局，它们都很相似，但应用程序不同： RAM从1行布局开始 css技巧中需要的拟合 我可以用flexbox模拟几乎所有的情况，但是如果他们中断到新行，则新行的行不应该增长，而上面的行应该增长。 代码如下：Html “试图复制布局”；“根据需要安装”；或；Ram"；对于IE 11，但项目在不应拉伸的情况下被拉伸,html,css,layout,flexbox,Html,Css,Layout,Flexbox,我试图复制这种布局，它们都很相似，但应用程序不同： RAM从1行布局开始 css技巧中需要的拟合 我可以用flexbox模拟几乎所有的情况，但是如果他们中断到新行，则新行的行不应该增长，而上面的行应该增长。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
body {
display: flex;
flex-wrap: wrap;
/* flex-flow: row wrap; */
height: 100vh;
margin: -1rem 0 0 -1rem;
}
div {
margin: 1rem 0 0 1rem;
display: flex;
/* id I set flex grow to 1, the items on the top grows as the should but the item in the new line should not */
flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(25% - 1rem);
min-width: 200px;
background: lightpink;
align-items: center;
justify-content: center;
}
@supports (display: grid) {
body {
display: grid;
height: 100vh;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
@supports (display: grid) {
div {
display: grid;
place-items: center;
background: lightpink;
}
}
body {
font-family: system-ui, sans-serif;
}
</style>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
文件
身体{
显示器：flex；
柔性包装：包装；
/*柔性流：行换行*/
高度：100vh；
保证金：-1雷姆0-1雷姆；
}
div{
保证金：1雷姆0 0 1雷姆；
显示器：flex；
/*id我将flex grow设置为1，顶部的项目应按预期增长，但新行中的项目不应按预期增长*/
flex-grow:0；
弹性收缩：0；
弹性基础：计算（25%-1勒姆）；
最小宽度：200px；
背景：浅粉红色；
对齐项目：居中；
证明内容：中心；
}
@支持（显示：网格）{
身体{
显示：网格；
高度：100vh；
差距：1勒姆；
网格模板列：重复（自动拟合，最小值（200px，1fr））；
}
}
@支持（显示：网格）{
div{
显示：网格；
放置项目：中心；
背景：浅粉红色；
}
}
身体{
字体系列：系统界面，无衬线；
}
1.
2.
3.
4.
有没有其他方法可以实现这个示例，可能不依赖flex基础，也不使用媒体查询？我想知道我能做到这一点。检查代码笔：
https://codepen.io/deleite/pen/BaKvqRp
<script>
// self-invoked wrapper for scoping the `document` variable
!(function (d) {
if (!d.currentScript) {
var s = d.createElement("script");
s.src =
"https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.9.2/EQCSS.min.js";
d.head.appendChild(s);
}
})(document);
</script>
而不是媒体查询。所有人都想知道我能做到这一点。检查代码笔：
https://codepen.io/deleite/pen/BaKvqRp
<script>
// self-invoked wrapper for scoping the `document` variable
!(function (d) {
if (!d.currentScript) {
var s = d.createElement("script");
s.src =
"https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.9.2/EQCSS.min.js";
d.head.appendChild(s);
}
})(document);
</script>