我如何使用最小和最大 CSS 函数来处理自动

Question

我希望能够使用普通的margin: auto属性，但是有最小的margin，比如：

margin: 0 max(auto, 16px);

这将使元素水平居中，并且当视口太小时，两侧仍然强制留出 16 像素的边距。但不适用于 min() 和 max() CSS 与 margin: auto;

例如：当屏幕低于 500px 时，我想为 .navbar__menu 设置样式 margin-left: 30px; 和 margin-right: 30px;。 （不使用@media 查询）

.navbar__menu {
  max-width: 500px;
  height: 50px;
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  background: red;
  display: flex;
}

<div class="navbar__menu">

</div>

Answer 1

使用margin-inline: max(30px,50% - 500px/2)，无需设置max-width（更详细：https://twitter.com/ChallengesCss/status/1469270181205749771）

.navbar__menu {
  height: 50px;
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  margin-inline: max(30px,50% - 500px/2);
  background: red;
  display: flex;
}

<div class="navbar__menu">

</div>

我如何使用最小和最大 CSS 函数来处理自动

How i can use min and max CSS functions to work with auto

html

css

padding

margin