试图让 1 个项目在 flexbox 容器中悬停时展开。相反，容器中的所有项目都会展开

Question

我想要的效果是让 flexbox 容器中的一个项目 (link) 在悬停时稍微增长或扩展，但当我将鼠标悬停在单个项目上时，整行项目都会增长。我一直在尝试通过增加填充来做到这一点，如下所示。

我的 HTML 模板使用 Angular 2+ 语法，但并不难理解。只需从 for 循环中动态获取 link 的列表。

任何帮助、建议或有用的 link 将不胜感激！

我的CSS如下~

.page-flex-link {
display: flex;
flex-flow: row wrap;
bottom: 1rem;
left: 10%;
position: absolute;
}

.page-flex-link > div {
background-color: #28a745;
border-radius: 50%;
padding: .5rem;
margin-left: .2rem;
margin-right: .2rem;
cursor: pointer;
box-shadow: .2rem .2rem .2rem grey;
}

.page-flex-link > div:hover {
background-color: #0f82db;
padding: .6rem;
box-shadow: .3rem .3rem .3rem grey;
}

.pli-text {
color: white;
text-decoration: none;
}

我的angular7HTML模板如下~

<div class="page-flex-link">
  <div *ngFor="let page of lesson.pages"
    (click)="goToPage(page.pageNum)">
    <a class="pli-text" routerLink="/lessons/{{lesson.id}}/pages/{{page.pageNum}}">{{page.pageNum}}</a>
  </div>

Answer 1

.page-flex-link 容器根据其子项计算其尺寸。当您增加子项的填充时，它也会增加容器的整体尺寸。

一个简单的解决方案是使用 CSS transform: scale() 而不是增加填充。 scale() 将增加元素的呈现大小，但不会增加其计算尺寸：

.page-flex-link {
  display: flex;
  flex-flow: row wrap;
  bottom: 1rem;
  left: 10%;
  position: absolute;
  align-items: center;
}

.page-flex-link > div {
  background-color: #28a745;
  border-radius: 50%;
  padding: 0.5rem;
  margin-left: 0.2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  box-shadow: 0.2rem 0.2rem 0.2rem grey;
}

.page-flex-link > div:hover {
  background-color: #0f82db;
  /*padding: 0.6rem;*/
  transform: scale(1.2);
  box-shadow: 0.3rem 0.3rem 0.3rem grey;
}

.pli-text {
  color: white;
  text-decoration: none;
}

<div class="page-flex-link">
  <div>
    <a class="pli-text">1</a>
  </div>
  <div>
    <a class="pli-text">2</a>
  </div>
  <div>
    <a class="pli-text">3</a>
  </div>
  <div>
    <a class="pli-text">4</a>
  </div>
  <div>
    <a class="pli-text">5</a>
  </div>
  <div>
    <a class="pli-text">6</a>
  </div>
  <div>
    <a class="pli-text">7</a>
  </div>
  <div>
    <a class="pli-text">8</a>
  </div>
  
</div>

试图让 1 个项目在 flexbox 容器中悬停时展开。相反，容器中的所有项目都会展开

Trying to get 1 item to expand on hover in a flexbox container. Instead all Items in container expand

html

css

flexbox

angular

angular7