使用列数时框阴影被切断

Question

我需要从上到下，然后从左到右排序我的项目，例如：

但是，框阴影正在被截断。参考代码片段：项目 3 的框阴影在底部被切断，项目 4 在顶部被切断（在 chrome 中）。

有与此类似的问题，但答案不适用于这种情况。我不能在带有 flex-direction: column 的容器上使用 flex，因为这需要明确的高度并且我的 item 计数是动态的。我也无法像其他答案所建议的那样将项目设置为 display: inline-block，因为我需要使用 flex.

控制此内容

.container {
  column-count: 2;
  column-gap: 16px;
  width: 500px;
}

.item {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  margin-bottom: 16px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  break-inside: avoid-column;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

我从其他类似的 SO 问题中尝试过的其他两件事没有奏效：设置 overflow: visible，在带有透明边框的项目周围添加包装。感谢您的任何建议。

Answer 1

一个想法是在应用框阴影的地方使用伪元素。确保伪元素不会跨越所有 space，这样它就不会受到切割的影响（使用不同于 0 的 top 和 bottom）

.container {
  column-count: 2;
  column-gap: 16px;
  width: 500px;
}

.item {
  border-radius: 3px;
  margin-bottom: 16px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  break-inside: avoid-column;
  position:relative;
  z-index:0;
}
.item:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:1px;
  bottom:3px;
  left:0;
  right:0;
    box-shadow: 
   0px 3px 1px -2px rgba(0, 0, 0, 0.2), 
   0px 2px 2px 0px rgba(0, 0, 0, 0.14), 
   0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Answer 2

添加 display: inline-flex 和 width: 100% 属性。 break-inside: avoid-column 属性无效。

.container {
  column-count: 2;
  column-gap: 16px;
  width: 500px;
  margin-top: -2px;
  margin-bottom: -14px;
}

.item {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  border-radius: 3px;
  margin-top: 2px;
  margin-bottom: 14px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

使用列数时框阴影被切断

box-shadow cut off when using column-count

css

flexbox

css-multicolumn-layout