我有一个容器<div>用display: flex。它有一个孩子<a>。
<div>
display: flex
<a>
我怎样才能使孩子显得“内联”?
具体来说,如何使孩子的宽度取决于其内容,而不扩展到父母的宽度?
我试过的
我将孩子设置为display: inline-flex,但仍然占用了整个宽度。我还尝试了所有其他显示属性,但没有任何效果。
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>
使用align-items: flex-start的容器上,或align-self: flex-start在柔性的项目。
align-items: flex-start
align-self: flex-start
不需要display: inline-flex。
flex容器的初始设置为align-items: stretch。这意味着柔性物品将沿横轴扩展以覆盖容器的整个长度。
align-items: stretch
该align-self属性的作用与之相同align-items,除了align-self适用于 flex项 而align- items适用于 flex容器 。
align-self
align-items
align- items
默认情况下,align-self继承的值align-items。
由于您的容器为flex-direction: column,因此交叉轴为水平,并且align-items:stretch正在最大程度地扩展子元素的宽度。
flex-direction: column
align-items:stretch
您可以align-items: flex-start在容器(由所有flex项目继承)上或align-self:flex-start在项目(仅限于单个项目)上覆盖默认值。
align-self:flex-start