我有一個(gè)容器<div>用display: flex。它有一個(gè)孩子<a>。如何讓孩子顯得“內(nèi)聯(lián)”？具體來說，如何讓孩子的寬度由其內(nèi)容決定，而不是擴(kuò)展到父母的寬度？我嘗試了什么：我把孩子設(shè)置為display: inline-flex，但它仍占用了整個(gè)寬度。我也嘗試了所有其他顯示屬性，但沒有任何效果。例：.container { background: red; height: 200px; flex-direction: column; padding: 10px; display: flex;}a { display: inline-flex; padding: 10px 40px; background: pink;}<div class="container"> <a href="#">Test</a></div>http://codepen.io/donpinkus/pen/YGRxRY
2 回答
netizen
TA貢獻(xiàn)1條經(jīng)驗(yàn) 獲得超1個(gè)贊
子元素使用單獨(dú)的?align-self: flex-start 配置可以自適應(yīng)內(nèi)容
紅糖糍粑
TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超6個(gè)贊
使用align-items: flex-start的容器上，或align-self: flex-start在柔性的項(xiàng)目。
沒必要display: inline-flex。
Flex容器的初始設(shè)置是align-items: stretch。這意味著柔性物品將展開以覆蓋沿橫軸的容器的整個(gè)長(zhǎng)度。
該align-self物業(yè)做同樣的事情align-items，除了align-self適用于彎曲的物品，同時(shí)align-items適用于柔性容器。
默認(rèn)情況下，align-self繼承值align-items。
由于您的容器是flex-direction: column，橫軸是水平的，并且align-items: stretch盡可能地?cái)U(kuò)展子元素的寬度。
您可以覆蓋align-items: flex-start容器（由所有彈性項(xiàng)目繼承）或align-self: flex-start項(xiàng)目（僅限于單個(gè)項(xiàng)目）的默認(rèn)值。
添加回答
舉報(bào)
0/150
提交
取消