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

Question

我有一个容器

，其中 显示:flex。它有一个子 。

怎样才能让孩子显得“内联”呢？

具体地说，我如何使孩子的宽度由它的内容决定，而不是扩展到父母的宽度？

我所尝试的：

我将子项设置为display:inline-flex，但它仍然占用了整个宽度。我也尝试了所有其他显示属性，但都没有效果。

示例：

null

.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>

null

http://codepen.io/donpinkus/pen/ygrxry

共2个答案

匿名用户

在容器上使用align-items:flex-start或在弹性项上使用align-self:flex-start。

不需要显示:inline-flex。

flex容器的初始设置是align-items:strett。这意味着flex项将扩展到沿着交叉轴覆盖容器的整个长度。

align-self属性与align-items执行相同的操作，只是align-self应用于flex项，而align-items应用于flex容器。

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

因为您的容器是flex-direction:column，所以交叉轴是水平的，align-items:strett尽可能地扩展子元素的宽度。

您可以在容器上使用align-items:flex-start（由所有flex项继承）或在项上使用align-self:flex-start（仅限于单个项）重写默认值。

在此处了解更多关于沿交叉轴的挠性对齐的信息：

• 柔性换行如何与align-self、align-items和align-content一起工作？

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

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

匿名用户

除了align-self之外，您还可以考虑自动边距，这将完成几乎相同的操作

null

.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>

Answer 1

除了align-self之外，您还可以考虑自动边距，这将完成几乎相同的操作

null

css prettyprint-override">.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>

Answer 2

在容器上使用align-items:flex-start或在弹性项上使用align-self:flex-start。

不需要显示:inline-flex。

flex容器的初始设置是align-items:strett。这意味着flex项将扩展到沿着交叉轴覆盖容器的整个长度。

align-self属性与align-items执行相同的操作，只是align-self应用于flex项，而align-items应用于flex容器。

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

因为您的容器是flex-direction:column，所以交叉轴是水平的，align-items:strett尽可能地扩展子元素的宽度。

您可以在容器上使用align-items:flex-start（由所有flex项继承）或在项上使用align-self:flex-start（仅限于单个项）重写默认值。

在此处了解更多关于沿交叉轴的挠性对齐的信息：

• 柔性换行如何与align-self、align-items和align-content一起工作？

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

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