小编典典

使弹性项目采用内容宽度,而不是父容器的宽度

html

我有一个容器<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>

阅读 371

收藏
2020-05-10

共1个答案

小编典典

使用align-items: flex-start的容器上,或align-self: flex-start在柔性的项目。

不需要display: inline-flex


flex容器的初始设置为align-items: stretch。这意味着柔性物品将沿横轴扩展以覆盖容器的整个长度。

align-self属性的作用与之相同align-items,除了align-self适用于 flex项align- items适用于 flex容器

默认情况下,align-self继承的值align-items

由于您的容器为flex-direction: column,因此交叉轴为水平,并且align-items:stretch正在最大程度地扩展子元素的宽度。

您可以align-items: flex-start在容器(由所有flex项目继承)上或align-self:flex-start在项目(仅限于单个项目)上覆盖默认值。

2020-05-10