Question

不确定这是与柔性盒相关的。但是如何保持1,2,3,4,5保持并避免闪烁？

＆＃13;

.container {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.container .item {
  width: 50px;
  height: 50px;
  background: red;
  box-sizing: border-box;
  padding: 5px;
}
.container .item:hover {
  border: 1px solid #000;
}

＆＃13;

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

＆＃13;

Answer 1

考虑为此使用伪元素。有了它，您无需担心闪烁，并且无需考虑隐形边框等即可进行布局。

.container {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.container .item {
  position: relative;                  /*  added property  */
  width: 50px;
  height: 50px;
  background: red;
  box-sizing: border-box;
  padding: 5px;
}
.container .item:hover::after {        /*  changed rule  */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border: 1px solid #000;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

使用伪你可以做这样的事情

.container {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.container .item {
  position: relative;                  /*  added property  */
  width: 50px;
  height: 50px;
  background: red;
  box-sizing: border-box;
  padding: 5px;
}
.container .item:hover::after {        /*  changed rule  */
  content: '';
  position: absolute;
  top: -5px; left: -5px; right: -5px; bottom: -5px;
  border: 1px solid #000;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

与transform相结合，这样的东西，既有效果又看起来非常好

.container {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}
.container .item {
  position: relative;                  /*  added property  */
  width: 50px;
  height: 50px;
  background: red;
  box-sizing: border-box;
  padding: 5px;
  transition: transform .5s;           /*  added property  */
}
.container .item:hover {               /*  added rule  */
  transform: scale(1.2);
}
.container .item:hover::after {        /*  changed rule  */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border: 1px solid #000;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

Answer 2

给你的.item类，边框在正常位置，背景颜色相同

.container .item {
width: 50px;
height: 50px;
background: red;
box-sizing: border-box;
padding: 5px;
border: 1px solid red;
}

Answer 3

简单的解决方案，但很酷的技巧..

预先给出一个透明边框，以便只有边框颜色发生变化，没有新的边框会移动内容并导致闪烁

＆＃13;

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

＆＃13;

WARN Received a PartitionLeaderEpoch assignment for an epoch < latestEpoch. This implies messages have arrived out of order. New: {epoch:4, offset:1669}, Current: {epoch:5, offset1540} for Partition: __consumer_offsets-26 (kafka.server.epoch.LeaderEpochFileCache)

＆＃13;

Answer 4

.container {
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
}
.container .item {
  position: relative;              
  width: 50px;
  height: 50px;
  background: red;
  box-sizing: border-box;
  padding: 5px;
}
.container .item:hover::after {    
  content: '';
  position: absolute;
  top: -5px; left: -5px; right: -5px; bottom: -5px;
  border: 1px solid #000;
}

在悬停时避免弹性框弹出的子元素

4 个答案: