html - 使 flex 元素采用内容宽度，而不是父容器的宽度

Question

我有一个容器 <div>与 display: flex .它有一个 child <a> .

如何让 child 看起来“内联”？

具体来说，如何让 child 的宽度由其内容决定，而不扩展到父级的宽度？

我尝试了什么:

我将 child 设置为 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

Answer 1

在容器上使用align-items: flex-start，或者在 flex 元素上使用align-self: flex-start。

不需要display: inline-flex。

---

flex 容器的初始设置是align-items: stretch。这意味着 flex 元素将沿着横轴扩展以覆盖容器的整个长度。

align-self 属性与 align-items 的作用相同，只是 align-self 应用于 flex 元素 而 align-items 适用于 flex 容器。

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

因为你的容器是flex-direction: column，所以横轴是水平的，align-items: stretch会尽可能地扩展子元素的宽度. (column 设置也是 display: inline-flex 不工作的原因。)

您可以使用容器上的 align-items: flex-start 覆盖默认值(所有 flex 元素都继承)或 align-self: flex-start在元素上(仅限于单个元素)。

---

在此处了解有关沿横轴 flex 对齐的更多信息:

• How does flex-wrap work with align-self, align-items and align-content?

在此处了解有关沿主轴 flex 对齐的更多信息:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?