彈性盒懸停兒童全高

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>