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

/* 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>

.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>

Html相关问答推荐

Chrome中是否有一个本地显示密码功能，用于`input type = password/`？""<"">

我需要主页按钮出现在中间

如何使用wai-aria标签访问相关的复选框？

CSS自定义特性中的URL是否可以相对于定义的CSS文件？

当在双引号｜Angular .html文件中使用时，Pretier会将单引号字符替换为&；Quot；

Angular 滑块问题

动态FormControl值在Angular 上绑定错误的问题

在Quarto/Discrealjs演示文稿中只增加一个列表的填充

调整一组IMG的大小以适应容器DIV

覆盖垫子中的边框底部 Select

未在抖动中播放的HTML音频｜｜文本正在工作其他标记正在播放，但音频未播放

现代网络浏览器可以并行下载哪些类型的网络资源？还有，什么东西不能并行下载？

div居中碰撞问题

使用单个粗体字符串向段落添加页边空白

使用不同字体对齐元素

并排放置两个 div，同时 div2 环绕 div1

如何使用 Bootstrap Grid 系统修复大屏幕上图片和进度条之间的空白？

拨动switch 在重新加载时未重置

提交前的验证表单未显示任何验证消息？

为什么 `html` 上的 overflow： hidden 将滚动框移动到正文？