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

Posted 2023-03-06

【中文标题】我如何使用最小和最大 CSS 函数来处理 auto

【英文标题】：How i can use min and max CSS functions to work with auto

【发布时间】：2022-01-16 05:48:10

【问题描述】：

我希望能够使用常见的margin: auto 属性，但有最小边距，例如：

margin: 0 max(auto, 16px);

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

例如： 当屏幕降低 500 像素时，我想为 .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>

【问题讨论】：

分享您的完整代码，以便我们了解您想要居中的元素的性质

【参考方案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>