在 Flexbox 布局下解决元素等高滚动问题的方法

在前端开发中，经常遇到要实现一个列表（如商品列表、文章列表等）并要求每个元素等高，同时允许滚动的情况。为了解决这个问题，在Flexbox布局下，我们可以采取以下方法来实现等高滚动：

使用Flexbox的属性

Flexbox布局里提供了一些属性可以让元素等高，常用的有两个：align-items和align-content。

align-items方式

align-items可以设定元素的对齐方式，可选值有：flex-start（头对齐）、flex-end（尾对齐）、center（居中对齐）、stretch（按照容器高度，对齐元素高度）。在这里，我们的要求是让元素等高，所以选择stretch。

.container {
  display: flex;
  align-items: stretch; /* 让元素等高 */
  overflow: auto; /* 开启滚动 */
}

align-content方式

如果你希望元素之间有一定的间距，可以用align-content来实现。其可选值与align-items所支持的值相同。

.container {
  display: flex;
  align-content: space-between; /* 创建间距 */
  overflow: auto; /* 开启滚动 */
}

自适应计算高度

但是上述方法有一个问题，即必须先对每个元素的高度进行确定，才能适用于这种情况，如果元素高度不确定或是动态的，就无法使用上述方法。一个通用的解决方法，是通过JavaScript来计算每个元素的高度并设置在flex-basis上。

const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.style.flexBasis = item.offsetHeight + 'px';
})

这个方法，首先获取所有的元素节点，然后用offsetHeight属性获取每个元素的实际高度，并将其设为flex-basis值。flex-basis用来设定元素在弹性布局下的基准大小，将每个元素都设为实际高度，则可以保证每个元素等高。

同时，还需要使用JS来在列表高度变化时重新计算每个元素的高度。

const container = document.querySelector('.container');
const resizeObserver = new window.ResizeObserver(entries => {
  entries.forEach(entry => {
    const item = entry.target;
    item.style.flexBasis = item.offsetHeight + 'px';
  })
})
resizeObserver.observe(container);

这个方法使用了ResizeObserver技术，当DOM元素尺寸变化时，会调用resizeObserver的回调函数进行处理，从而实时计算和更新元素的高度。

原生实现示例代码

下面是一个使用原生的方式实现等高滚动的示例代码。

// www.javascriptcn.com code example
<div class="container">
  <div class="item">
    <h2>Title 1</h2>
    <p>Content 1</p>
  </div>
  <div class="item">
    <h2>Title 2</h2>
    <p>Content 2</p>
  </div>
  <div class="item">
    <h2>Title 3</h2>
    <p>Content 3</p>
  </div>
  ...
</div>

// www.javascriptcn.com code example
.container {
  display: flex;
  align-items: stretch; /* 让元素等高 */
  align-content: space-between; /* 创建间距 */
  flex-wrap: wrap; /* 允许换行 */
  overflow: auto; /* 开启滚动 */
  height: 200px;
}
.item {
  flex: 1 1 auto; /* 填充容器宽度 */
  min-height: 0; /* 解决内容超出高度 */
  border: 1px solid #ccc;
  margin: 5px;
  padding: 10px;
  box-sizing: border-box;
}

// www.javascriptcn.com code example
const container = document.querySelector('.container');
const items = document.querySelectorAll('.item');
const resizeObserver = new window.ResizeObserver(entries => {
  entries.forEach(entry => {
    const item = entry.target;
    item.style.flexBasis = item.offsetHeight + 'px';
  })
})
resizeObserver.observe(container);
items.forEach(item => {
  item.style.flexBasis = item.offsetHeight + 'px';
})

结语

以上是在Flexbox布局下，如何解决元素等高滚动问题的方法。这种方法可以应用于各种情况，包括商品列表、文章列表、瀑布流等。希望文章对读者有所启迪，同时也希望能够通过这篇文章，学到一些新的技术知识。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cfdf48e46428fe9ec15e15