我有一個容器<div>用display: flex。它有一個孩子<a>。如何讓孩子顯得“內聯”？具體來說，如何讓孩子的寬度由其內容決定，而不是擴展到父母的寬度？我嘗試了什么：我把孩子設置為display: inline-flex，但它仍占用了整個寬度。我也嘗試了所有其他顯示屬性，但沒有任何效果。例：.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 回答
紅糖糍粑
TA貢獻1815條經驗 獲得超6個贊
使用align-items: flex-start的容器上，或align-self: flex-start在柔性的項目。
沒必要display: inline-flex。
Flex容器的初始設置是align-items: stretch。這意味著柔性物品將展開以覆蓋沿橫軸的容器的整個長度。
該align-self物業做同樣的事情align-items，除了align-self適用于彎曲的物品，同時align-items適用于柔性容器。
默認情況下，align-self繼承值align-items。
由于您的容器是flex-direction: column，橫軸是水平的，并且align-items: stretch盡可能地擴展子元素的寬度。
您可以覆蓋align-items: flex-start容器（由所有彈性項目繼承）或align-self: flex-start項目（僅限于單個項目）的默認值。
- 2 回答
- 1 關注
- 885 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消