使用css flexbox时如何防止按钮占据全宽？

Question

当我使用 Flexbox 将内容居中时，我总是遇到这个问题，其中我的按钮最终跨越了 div 的整个宽度。我希望它只占用它需要的空间。

代码：

HTML：

                    <div class="who__text-content">
                        <h2 class="u-margin-bottom-2">Who</h2>
                        <h2 class="u-margin-left-2 u-margin-bottom-2">Lorem ipsum</h2>
                        <p class="u-margin-left-2 u-margin-bottom-6">Lorem ipsum</p>
                        <a href="#" class="btn u-margin-left-2">Meet The Team</a>
                    </div>

萨斯：

.btn {
    padding: 1.3rem 3.7rem;
    width: auto;
}

.who {
    &__text-content {
        padding-bottom: 1.3rem;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        margin: auto;
        height: 100%;
        <!-- I tried using the code bellow instead of the code above with position: relative; on the parent element. It ensures the button doesn't span the fullwidth but then all of the content becomes squished and doesn't use all the available space. -->
        // position: absolute;
        // top: 50%;
        // left: 50%;
        // transform: translate(-50%, -50%);
    }
}

提前致谢

Answer 1

就我而言，该按钮位于另一个弹性列容器内，只需使用align-self禁用的增长宽度即可。

<!-- aligned button in flex column container -->
<div style="display: flex; flex-direction: column;">
  <button type="button" style="align-self: flex-start">Hello</button>
</div>

<!-- button in flex column container fills width -->
<div style="display: flex; flex-direction: column;">
  <button type="button">Hello</button>
</div>

Answer 2

display: inline-block应该这样做。但这很奇怪，<a>永远不应该是块级的，所以无论如何也不应该填充 100%。我假设保证金类别有块显示？您还可以width: auto从.btn类中删除，因为宽度不应该对锚标记执行任何操作，尽管它们inline无论如何都是默认的。例如，在活动状态下，inline-block您可以设置宽度，或者使用填充所有空间。flex:1

编辑：问题是align-content. 下面的片段显示了工作示例。

请参阅这篇文章align-content以获取有关vs的一些信息align-items。

.who__text-content {
        background:orange;
        padding-bottom: 1.3rem;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: auto;
        height: 100%;
        width:400px;
}

.btn {
  padding: 1.3rem 3.7rem;
  background:black;
}

<div class="who__text-content">
  <h2 class="u-margin-bottom-2">Who</h2>
  <h2 class="u-margin-left-2 u-margin-bottom-2">Lorem ipsum</h2>
  <p class="u-margin-left-2 u-margin-bottom-6">Lorem ipsum</p>
  <a href="#" class="btn">Meet The Team</a>
</div>