弹性盒悬停儿童全高

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 ）控制插入符的位置。

 .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; } 

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

的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实体代替直接符号

 * { 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; } 

 <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>