缩小弹性项目以适应内容[重复]

Question

这是一个示例：

body {
  display: flex;
  flex-direction: column;
}

a {
  background: lightGreen;
}

<a href="#">This is some text.</a>

<a> 元素与页面宽度一样长。我们如何缩小它以适应内容？

Answer 1

将弹性项目对齐到横轴的起始侧。见https://css-tricks.com/snippets/css/a-guide-to-flexbox。

body {
  display: flex;
  flex-direction: column;
  align-items: start;
}

a {
  background: lightGreen;
}

<a href="#">This is some text.</a>
<a href="#">This is some longer text.</a>