如何在响应式国旗轮播组件中居中显示中间元素？

需求说明 #

• 开发包含14个国家国旗的轮播组件，容器每次仅显示3个国旗
• 每2秒自动滑动：左侧国旗移出容器，中间国旗移至左侧，右侧国旗移至中间并轻微缩放突出，同时新国旗从右侧进入

当前问题 #

无法将中间图片居中到容器正中间：使用justify-content: center;时，菲律宾国旗会错误显示在容器中间，不符合需求。

已尝试方案 #

• 通过固定像素计算位移，但仅在固定宽度下有效，无法适配小屏幕
• 在div上设置justify-content: center;

代码实现 #

JavaScript #

const slider = document.querySelector('.flag-slider');
const flags = document.querySelectorAll('.flag');
let currentIndex = 2; // Middle flag

function updateFlags() {
  flags.forEach((flag, index) => {
    flag.classList.remove('active');
    if (index === currentIndex - 1) {
      flag.classList.add('active');
    }
  });
}

function slideFlags() {
  // Slide to the left
  slider.style.transform = `translateX(-${(currentIndex - 1) * (75 / 3)}%)`;

  currentIndex++;

  if (currentIndex > flags.length) {
    console.log('reset');
    currentIndex = 2;
    slider.style.transform = `translateX(0%)`;
  }

  updateFlags();
}

// Initial flag setup
updateFlags();

// Auto-slide every 2 seconds
setInterval(slideFlags, 2000);

CSS #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

.countries {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 300px;
  padding: 20px;
}

.slider-container {
  width: 100%;
  margin: 50px auto;
  overflow: hidden;
  position: relative;
}

.flag-slider {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.flag,
.last_flag {
  width: 33.33%;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.flag img {
  width: 100%;
  object-fit: contain;
}

.flag.active {
  transform: scale(1.2);
}

HTML #

<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
  <meta name="description" content="">
  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">
  <meta property="og:image:alt" content="">
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="icon.png">
  <link rel="manifest" href="site.webmanifest">
  <meta name="theme-color" content="#fafafa">
</head>

<body>

  <div class="countries">
    <div class="slider-container">
      <div class="flag-slider">
        <img class="flag" src="https://picsum.photos/200" alt="Australia">
        <img class="flag" src="https://picsum.photos/200" alt="Austria">
        <img class="flag" src="https://picsum.photos/200" alt="Brazil">
        <img class="flag" src="https://picsum.photos/200" alt="Canada">
        <img class="flag" src="https://picsum.photos/200" alt="France">
        <img class="flag" src="https://picsum.photos/200" alt="Germany">
        <img class="flag" src="https://picsum.photos/200" alt="India">
        <img class="flag" src="https://picsum.photos/200" alt="Mexico">
        <img class="flag" src="https://picsum.photos/200" alt="Philippines">
        <img class="flag" src="https://picsum.photos/200" alt="South Africa">
        <img class="flag" src="https://picsum.photos/200" alt="Egypt">
        <img class="flag" src="https://picsum.photos/200" alt="UK">
        <img class="flag" src="https://picsum.photos/200" alt="USA">
        <img class="flag" src="https://picsum.photos/200" alt="Venezuela">
        <img class="flag" src="https://picsum.photos/200" alt="Australia">
        <img class="last_flag" src="https://picsum.photos/200" alt="Austria">
      </div>
    </div>
    <span>Different countries</span>
  </div>
  <script src="js/app.js"></script>
</body>

</html>

内容的提问来源于stack exchange，提问作者jit