如何讓我的彈性單元填滿它的整個空間？

Question

每當我在框上使用 hover 時，單元格的背景會占據整個寬度（由於width: 100% ），但是當我對高度執行相同操作時，它不會這樣做。 父母沒有任何填充，所以我該如何解決這個問題？

我查看了“ https://css-tricks.com/boxes-fill-height-dont-squish/ ”之類的鏈接並嘗試使用flex-grow但它似乎對我不起作用，但我可能搞砸了它了。

 div { display: flex; flex-direction: row; background-color: lightgray; text-align: center; justify-content: space-evenly; } div p { font-size: 20px; color: black; font-weight: bold; width: 100%; height: 100%; } div p:hover { background-color: green; }

 <div> <p>Header1</p> <p>Header2</p> <p>Header3</p> </div>

Answer 1

段落元素上設置了默認邊距。

您需要禁用這些，而是為容器指定高度。

 div { display: flex; justify-content: space-evenly; height: 75px; background-color: lightgray; } div p { margin: 0; /* override default margins */ flex: 1; /* consume full width */ display: flex; /* for aligning content of flex item */ align-items: center; justify-content: center; font-size: 20px; color: black; font-weight: bold; } div p:hover { background-color: green; }

 <div> <p>Header1</p> <p>Header2</p> <p>Header3</p> </div>

理解“塊啟動”：

• “block-start”是橫寫模式的頂部。
• “inline-start”是文本開始的一側。 它是 LTR 的左側。
• “-end”是指對面。
• 來源： 第 6.2 節。 流動相關方向

Answer 2

您可以使用span標簽代替p並為其提供填充，如下所示；

 div { display: flex; flex-direction: row; background-color: lightgray; text-align: center; justify-content: space-evenly; } div span { font-size: 20px; color: black; font-weight: bold; width: 100%; height: 100%; padding: 25px; } div span:hover { background-color: green; }

 <div> <span>Header1</span> <span>Header2</span> <span>Header3</span> </div>