Flexbox中的单个元素未居中

前端开发 2026-07-08

我有一个带动画效果的弹性盒布局，当你指向的任意项会获得更多空间。这确实会发生，只是该项获得的空间只在右侧增加，左侧并没有。此外，flex-grow的比例是2:1，但被指向的项似乎获得了更多空间。添加justify-content: center对此并无影响。有人能帮我理解是什么驱动了这种行为吗？下面有截图和代码，第一张是在加载时的外观，第二张是在将鼠标悬停在第三个项上时的外观。请原谅这些不太美观的图像，我只是想把它跑起来：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="Swish.css">
  </head>
  <body>
    <!-- favicon -->
    <header class="header">
      <span class="header_logo_svg">
        <!-- image -->
      </span>
    </header>

    <main>
      <section class="main-splash">
        Not A Noob
      </section>
      <section class="main-swish">
        <!-- multiple transparent diagonal bands of various shades, add with js -->
      </section>
      <section class="main-swiper">
        <h2 class="main-swiper__grid">Stuff I Did</h2>
        <div class="main-swiper__wrapper">
          <ul class="main-swiper__flex">
            <li class="main-swiper__item" id="li1">
              <img src="splodge.jpg">
            </li>
            <li class="main-swiper__item" id="li2">
              <a href="https://www.example.com" target="_blank">
                <img src="splodge.jpg">
              </a>
            </li>
            <li class="main-swiper__item" id="li3">
              <img src="splodge.jpg">
            </li>
            <li class="main-swiper__item" id="li1">
              <img src="splodge.jpg">
            </li>
          </ul>
        </div>
      </section>
    </main>

    <footer class="footer">
    </footer>

    <h2 id="header">Begin</h2>
    <script src="Swish.js"></script>

  </body>
</html>

body {
  margin: 0;
  font-family: sans-serif;
}

main > section {
    display: block;
}

.main-swiper__wrapper {
  height: 300px;
}

.main-swiper__flex {
  display: flex;
  height: 100%;
  background: dodgerblue;
  padding: 0;
  margin: 0;
  list-style: none;
}

.main-swiper__item {
  flex: 0;
  height: 100%;
  transition: flex 0.3s ease;
}

.main-swiper__item img {
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

console.log("JS loaded");

const flexContainer = document.querySelector(".main-swiper__flex");
const items = document.getElementsByClassName("main-swiper__item");

console.log("container: " + JSON.stringify(flexContainer.style.flex));

flexContainer.addEventListener("mouseleave", containerShrink);
//flex.addEventListener("mouseleave", outShrink);
for (let i = 0; i < items.length; i++) {
  items[i].addEventListener("mouseenter", expand);
  items[i].addEventListener("mouseleave", shrink);
}

function expand(e) {
  for (let i = 0; i < items.length; i++) {
    if (items[i] !== e.currentTarget) {
      items[i].style.flex = "1 0 5%";
    }
  }
  e.currentTarget.style.flex = "2 0 5%";
  //e.currentTarget.querySelector("img").style.transform = "scale(1.2)";
}

function shrink(e) {
  e.currentTarget.style.flex = "1 0 5%";
  //e.currentTarget.querySelector("img").style.transform = "scale(1)";
}

function containerShrink() {
  for (let i = 0; i < items.length; i++) {
  items[i].style.flex = 0;
  }
}

加载时的外观