css 项目的水平列表：倒数第二个项目居中，而最后一个项目占据所有剩余空间

pepwfjgg 于 2023-02-17 发布在其他

关注(0)|答案(1)|浏览(179)

我正在构建一个横向项目列表：

滚动到列表末尾后，倒数第二个项目需要位于中间，最后一个项目占据其后的所有剩余空间。

我已经成功地制作了项目列表，但不确定什么是最好的方式来实现所需的行为，使倒数第二个项目居中，最后一个项目占用剩余空间。
我将感谢任何帮助或建议，引导我在正确的方向。谢谢！

/* layout */

.container {
  display: flex;
  overflow-x: auto;
  gap: 21px;
}

.item {
  min-width: 212px;
  height: 254px;
}

/* visuals */

.container {
  padding-left: 11px;
}

.item {
  background: #D9D9D9;
}

.item.green {
  background: #099F9F;
}

.item.red {
  background: #FF6262;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item green"></div>
  <div class="item red"></div>
</div>

css

来源：https://stackoverflow.com/questions/75472832/horizontal-list-of-items-the-next-to-last-item-is-centered-while-the-last-item

1条答案

按热度按时间

thtygnil1#

可以将宽度定义为calc((100% - item_wdith - 2*gap)/2)

.container {
  display: flex;
  overflow-x: auto;
  padding-left: 10px;
  gap: 20px;
}

.item {
  width: 220px;
  flex-shrink: 0;
  height: 254px;
  background: #D9D9D9;
}

.item.green {
  background: #099F9F;
}

.item.red {
  background: #FF6262;
  width: calc((100% - 220px - 2*20px)/2);
}

/* to illustrate the center */
html {
  background: linear-gradient(red 0 0) 50%/2px 100% no-repeat;
  min-height: 100%;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item green"></div>
  <div class="item red"></div>
</div>

赞(0）回复(0）举报 2023-02-17

我来回答

css 项目的水平列表：倒数第二个项目居中，而最后一个项目占据所有剩余空间

1条答案

相关问题

热门标签

最新问答