Question

我可以缓慢或快速地增加保证金吗？

例如，我希望能够为页脚导航中的左侧 ul 设置 3rem 的边距，然后随着视口宽度增加 200 像素，使其边距快速增加到 10rem。

但是，如果我要使用媒体查询，我不希望边距发生大的跳跃，因此导航将继续在中间的所有各种视口宽度下看起来不错。

.footer-nav {
  margin-top: 1.5rem;
  margin-left: 1rem;
  display: flex;
}
.footer-nav ul {
  margin-right: 3rem;
}

.footer-nav li {
  margin-top: 2rem;
}

.footer-nav a {
  font-size: 1em;
  font-family: "Fira Sans";
  color: #9fcfff;
  text-decoration: none;
}

   <nav class="footer-nav">
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">View Courses</a></li>
          <li><a href="#">ML-in-Excel</a></li>
        </ul>
        <ul>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Terms of Use</a></li>
        </ul>
      </nav>

Answer 1

使用clamp() ^ref

.footer-nav {
  margin-top: 1.5rem;
  margin-left: 1rem;
  display: flex;
}

.footer-nav ul:first-child {
  margin-right: clamp(3rem, 10%,10rem);
}

.footer-nav li {
  margin-top: 2rem;
}

.footer-nav a {
  font-size: 1em;
  font-family: "Fira Sans";
  color: #9fcfff;
  text-decoration: none;
}

<nav class="footer-nav">
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">View Courses</a></li>
    <li><a href="#">ML-in-Excel</a></li>
  </ul>
  <ul>
    <li><a href="#">Log In</a></li>
    <li><a href="#">Sign Up</a></li>
    <li><a href="#">Terms of Use</a></li>
  </ul>
</nav>

Answer 2

与其使用 margin，不如考虑使用 gap（以前称为 flex-gap，是 column-gap 和 row-gap 的简写）。还可以考虑使用 flex-wrap: wrap; 而不是具有多个 <ul> 元素。

.footer-nav {
  margin-top: 1.5rem;
  margin-left: 1rem;
}
  .footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    column-gap: calc( 3rem + 10vw );
    row-gap: 1rem;
    list-style: none;
    margin: 0;

    outline: 1px solid blue;
  }
    .footer-nav li {
      margin: 0;
      padding: 0;

      outline: 1px solid red;
    }
      .footer-nav a {
        font-size: 1em;
        font-family: "Fira Sans";
        color: #9fcfff;
        text-decoration: none;
      }

<nav class="footer-nav">
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">View Courses</a></li>
    <li><a href="#">ML-in-Excel</a></li>
    <li><a href="#">Log In</a></li>
    <li><a href="#">Sign Up</a></li>
    <li><a href="#">Terms of Use</a></li>
  </ul>
</nav>

当我使用 CSS 增加视口宽度时，是否有可能影响边距增加的速度？

2 个答案: