让flex项采用内容宽度，而不是父容器的宽度

Question

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

- Don P

Answer 1

在容器上使用align-items: flex-start，或在弹性项上使用align-self: flex-start。无需使用display: inline-flex。

弹性容器的初始设置为align-items: stretch。这意味着弹性项将扩展以覆盖容器沿交叉轴的整个长度。 align-self属性与align-items做相同的事情，只是align-self应用于弹性项，而align-items应用于弹性容器。

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

由于您的容器具有flex-direction: column，因此交叉轴是水平的，并且align-items: stretch正在尽可能地扩展子元素的宽度。(此设置也是display: inline-flex不起作用的原因。)

您可以通过在容器上使用align-items: flex-start(该值会被所有弹性项目继承)或在项目上使用align-self: flex-start(该值仅适用于单个项目)来覆盖默认值。

了解更多有关沿交叉轴进行弹性对齐的信息，请单击此处：

- 如何使用align-self、align-items和align-content以及flex-wrap一起工作？ 了解有关沿主轴进行弹性对齐的信息，请单击此处：

- 在CSS Flexbox中，为什么没有“justify-items”和“justify-self”属性？

- Michael Benjamin

---

感谢您的详细解释。 我已经使用Flex一段时间了，但有很多细节很容易被忽略。 - Deshen

由于某些原因，这里无法工作： https://jsfiddle.net/b8zd37st/ - MAZ

谢谢。使用inline-flex来防止弹性盒子占用父元素的宽度有什么问题吗？ - Crashalot

@MAZ，不起作用是因为您的 flex 容器是 row 方向（与问题中的 column 不同）。因此，align-* 属性沿交叉轴工作，会在您的布局中垂直移动项目，而不是水平移动。在您的情况下，请使用 display: inline-flex。https://jsfiddle.net/uvrja2e3/ - Michael Benjamin

@Crashalot，它不起作用是因为容器设置为flex-direction: column。如果容器是row方向，使用inline-flex来防止弹性盒子占用父元素的宽度是没有问题的。 - Michael Benjamin

Answer 2

除了align-self，您还可以考虑使用自动边距，它几乎可以达到相同的效果。

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}
a {
  margin-right:auto;
  padding: 10px 40px;
  background: pink;
}

<div class="container">
  <a href="#">Test</a>
</div>

- Temani Afif

Answer 3

width: min-content 也会产生相同的结果。 如果对你很重要，那么IE11不支持：https://caniuse.com/mdn-css_properties_width_min-content

- Kerry Johnson

Answer 4

从2023年开始，您还可以执行以下操作：

width: -webkit-fill-available

- Sydney C.