您不想拉伸高度跨度吗？
您可能会影响一个或多个弹性项目，而不会拉伸容器的整个高度。
要影响容器的所有弹性项目，请选择以下选项：
您必须设置
align-items: flex-start;为，
div并且该容器的所有弹性项目都将获得其内容的高度。
div { align-items: flex-start; background: tan; display: flex; height: 200px;}span { background: red;}<div> <span>This is some text.</span></div>要仅影响单个flex-item，请选择以下选项：
如果要在容器上 取消 拉伸单个flex-item，则必须设置
align-self: flex-start;为该flex-
item。容器的所有其他弹性项目均不受影响。
div { display: flex; height: 200px; background: tan;}span.only { background: red; align-self:flex-start;}span { background:green;}<div> <span >This is some text.</span> <span>This is more text.</span></div>为什么会发生这种情况span
？
该属性的默认值
align-items是
stretch。这就是为什么
span填充高度的原因
div。
baseline
和之间的区别flex-start
？
如果弹性项目上有一些带有不同字体大小的文本，则可以使用第一行的基线垂直放置弹性项目。具有较小字体大小的弹性项目在容器及其顶部之间具有一定的空间。使用
flex-startflex-item会将其设置在容器的顶部（无空间）。
div { align-items: baseline; background: tan; display: flex; height: 200px;}span { background: red;}span.fontsize { font-size:2em;}<div> <span >This is some text.</span> <span>This is more text.</span></div>
