Question

我试图做网格插入符号，插入符号位于顶部和底部，当用户悬停在每一侧时，将出现灰色区域。

<div class="control-wrap">
  <div class="caret-wrap">
    <span class="caret">▲</span>
  </div>

  <div class="caret-wrap">
    <span class="caret">▼</span>
  </div>
</div>

我的进展很好，但是悬停存在问题，它并没有填补剩下的空间。

演示https://jsfiddle.net/xqq0wpes/1/

Answer 1

稍加修改 - 在.control-wrap上只管理子元素（.caret-wrap）的流程，并在子元素（.caret-wrap）上控制插入符号位置。

＆＃13;

.control-wrap {
  display: flex;
  flex-direction: column;

  width: 20px;
  height: 30px;
  margin: 0px 10px;
  border: 1px solid;
}

.caret-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 1;

  cursor: pointer;
  font-size: 8px;
}

.caret-wrap:hover {
  background: #ddd;
}

.caret-wrap:active {
  color: grey;
}

＆＃13;

<div class="control-wrap">
  <div class="caret-wrap">
    <span class="caret">▲</span>
  </div>

  <div class="caret-wrap">
    <span class="caret">▼</span>
  </div>
</div>

＆＃13;

JSFiddle

Answer 2

您需要从align-items: center;移除justify-content: space-evenly;和.control-wrap，然后将flex: 1 1 auto;，align-items: center;，justify-content: center;添加到.caret-wrap这样子项就可以获得全宽和可用高度，插入符号将在中心对齐。这是您更新的小提琴https://jsfiddle.net/xqq0wpes/10/

这是您更新的CSS

.control-wrap {
  width: 20px;
  /* align-items: center; */
  display: flex;
  flex-flow: column;
  margin: 0px 10px;
  border: 1px solid;
  height: 30px;
  /* justify-content: space-evenly; */
  .caret-wrap {
    cursor: pointer;
    font-size: 8px;
    padding-left: 2px;
    padding-right: 2px;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    &:hover {
      background: #ddd;
    }
    &:active {
      color: grey;
    }
  }
}

Answer 3

我在这里看不到 Flexbox 的任何需要......你可以在没有flexbox的情况下完成。

对于符号，尝试在此使用html实体而不是直接符号

＆＃13;

* {
  box-sizing: border-box;
}

.control-wrap {
  width: 20px;
  margin: 0px 10px;
  border: 1px solid;
  height: 30px;
}

.caret-wrap {
  cursor: pointer;
  font-size: 8px;
  height: 50%;
  text-align: center;
  padding: 2px;
  background: red;
}

.caret-wrap:hover {
  background: #ddd;
}

.caret-wrap:active {
  color: grey;
}

＆＃13;

<div class="control-wrap">
  <div class="caret-wrap">
    <span class="caret">&#9650;</span>
  </div>

  <div class="caret-wrap">
    <span class="caret">&#9660;</span>
  </div>
</div>

＆＃13;

flex-box悬停儿童全高

3 个答案: