使用 CSS 具有等距 div 的流体宽度

在 Web 开发中，等距布局 (Isometric Layout) 能够创造出现代、优雅且令人难忘的设计效果。等距布局是指将物体沿三个轴线展示 (X 轴、Y 轴、Z 轴)，从而创造出非常接近于三维的效果。这个布局因为可以解决各种不同的 layout 问题而越来越受欢迎。

在这篇教程中，我们将介绍如何使用 CSS 创造等距 div 的流体宽度。我们将会使用一个非常有用的 CSS 属性：calc 函数。

认识 calc 函数

calc 函数可以让我们在 CSS 中进行简单数学运算。这个函数支持加减乘除四则运算，也可以和 px、em、rem 等单位结合使用。

下面是 calc 函数的一个示例：

width: calc(100% - 20px);

这段代码意思是将一个元素的宽度设置为它所在父级元素宽度的 100% 减去 20px。

实现等距 div

现在我们来使用 calc 函数创造等距 div：

<div class="isometric-grid">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
</div>

.isometric-grid {
  display: flex;
  flex-wrap: wrap;
  perspective: 1000px; /* 透视效果 */
}

.box {
  width: calc(25% - 10px);
  height: 100px;
  margin: 10px;
  background-color: #333;
  color: #fff;
  text-align: center;
  transform: rotateY(-45deg) rotateX(calc(-45deg - 60deg)) /* 旋转效果 */;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1) /* 阴影效果 */;
}

这段代码创造了一个橙色的等距 div 网格。我们使用了 calc 函数来计算 box 的宽度，这样每行将会展示四个等距 div，而且它们会完美地相邻。我们同样也使用了 perspective、transform 和 box-shadow 等 CSS 属性来增强我们的效果。

总结

等距布局在现代 Web 设计和开发中变得越来越流行。使用 CSS 的 calc 函数和其他 CSS 属性，我们可以轻松地创造出统一的等距布局效果。将它们应用到你自己的代码中吧，让你的 Web 设计和开发变得更加现代和优美。