精妙技巧 | CSS盒子自动补齐剩余距离，惊艳你的布局！

2023-12-06 18:47:24

自动补齐剩余距离：让你的 CSS 盒子更惊艳！

在网页设计中，经常需要让某个盒子元素自动填充剩余空间，以实现平衡布局、响应式设计等效果。CSS 提供了两种方法来实现这一目标：flex 布局中的 flex-grow 属性和 grid 布局中的 fractional unit（fr）单位。

flex-grow 属性

flex 布局是一种流行的布局方式，能够让元素在父元素内灵活排列。flex-grow 属性用于控制元素在主轴方向上的增长比例。当主轴方向有剩余空间时，flex-grow 属性为正值的元素会自动填充剩余空间。

语法：

flex-grow: <number>;

<number>：指定元素在主轴方向上的增长比例。值为非负数，默认值为 0。

示例：

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

<style>
.container {
  display: flex;
  flex-direction: row;
}

.item {
  flex-grow: 1;
  border: 1px solid black;
  padding: 10px;
}
</style>

在这个例子中，三个元素在容器内水平排列。由于每个元素的 flex-grow 属性都为 1，因此它们都会自动填充剩余宽度。

fractional unit（fr）单位

fractional unit（fr）单位是一种 CSS 单位，用于指定元素的宽度或高度。fr 单位的计算方式是将剩余空间平均分配给所有使用 fr 单位的元素。

语法：

width: <number>fr;

<number>：指定元素的宽度或高度，单位为 fr。

示例：

<div class="container">
  <div class="item item-1">Item 1</div>
  <div class="item item-2">Item 2</div>
  <div class="item item-3">Item 3</div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;
}

.item {
  border: 1px solid black;
  padding: 10px;
}
</style>