相关疑难解决方法(0)

考虑以下示例......

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.parent {
  min-height: 100vh;
  width: 50vw;
  margin: 0 auto;
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  border: 1px solid blue;
  width: 150%;
}

<div class="parent">
	<div class="child">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet tellus cras adipiscing enim eu turpis. Neque aliquam vestibulum morbi blandit. Sem integer vitae justo eget …

是否可以定义一个最大列数的网格，但是当屏幕宽度改变时允许元素包装到新行上？

我有隐式类，允许行包装到新行上，但是没有最大列数。

这是使用弹性盒的一种方法的代码笔

CSS：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

另一种方法是使用网格

.grid {
  display: grid;
  counter-reset: grid-items;
  position: relative;
}


.grid--auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

我想要一个相当通用的解决方案，没有Java脚本或媒体查询，我想实现的目标是否可能？

我四处寻找答案，但找不到任何有用的信息。我正在尝试将topCSS 中元素的属性设置为max(0, 120vh - 271px). 我已经尝试了几种变体：

• top: max(0, 120vh - 271px);
• top: max(0, (120vh - 271px));
• top: max(0, calc(120vh - 271px));

我的语法有问题吗？我一直让 Chrome 告诉我这是一个无效的属性错误。

在实践中，我实际上使用 CSS 变量来表示数字。所以120vh实际上是var(--height)或类似的东西。当我使用 CSS 变量时，该行没有做任何事情。它不应用样式，我没有收到任何警告。我在这里做错了什么？

我正在使用最新版本的 Chrome（我相信是 83），所以应该支持它。

在这里研究了一些问题，但它们并不能完全解决我正在寻找的问题。

假设我有一个网站并且我想要。在桌面上我想要这个：

这很容易。grid-template-columns: repeat(3, 33%)（基本上）

然而，在移动设备上，我想要这个

我遇到的情况发生在它翻转到单个列之前：

我正在尝试clamp()，minmax()以及各种各样的事情，但没有任何事情能够按照我想要的方式进行。是的，我完全可以使用媒体查询，但我希望使用现代CSS（如clamp、grid、minmax等）创建一个真正流畅的网格/柔性布局，这样就不需要媒体查询来进行基本的布局更改。

我知道这不起作用，但作为请求的起点，这是我 100 次尝试之一的简单版本:) 在这个版本中，我尝试使用钳位从重复（3）切换到重复（1）。

.wrapper {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(clamp(1, calc(100% - 500px), 3), 33%);
}

.one {
  background: red;
}

.two {
  background: green;
}

.three {
  background: blue;
}

<div class="wrapper">
  <div class="item one"><h3>Example A</h3></div>
  <div class="item two"><h3>Example Two</h3></div>
  <div class="item three"><h3>Third Example</h3></div>
</div>