Flex 容器宽度适合内容宽度

Posted 2023-03-05

【中文标题】Flex 容器宽度适合内容宽度

【英文标题】：Flex container width fit content width

【发布时间】：2017-08-08 05:32:43

【问题描述】：

在将父弹性容器宽度与子弹性容器内容宽度匹配时遇到问题。

使用 Bulma，我有以下 html 结构

    .signup-form 
      display:inline-flex;
      align-items: center;
    

    <div class="body">
    <div class="is-active modal">
    
        <div class="modal-background">
        </div>
    
        <div class="modal-card signup-form">

          <header class="modal-card-head has-text-centered">
            <button class="delete"></button>
            <p class="modal-card-title">Title</p>
          </header>
    
          <section class="modal-card-body">
            <input class="input" placeholder="Name"/ >
            <input class="input" placeholder="Phone Number"/ >
            <input class="input" placeholder="Email"/ >
            <input class="input" placeholder="Address"/ >
          </section>
    
          <footer class="modal-card-foot">
            <nav class="page-control level has-text-centered is-mobile">
              <a class="button is-small is-info">
                Next
              </a>
            </nav>
          </footer>
    
        </div>
      </div>
    </div>

但它最终适用于所有子 flex 容器，如您在此处看到的：

http://codepen.io/anon/pen/mWqRxW

如何解决这个问题，并使父 flex 容器适合子 flex 容器的宽度（在这种情况下是输入的宽度）？

【参考方案1】：

当容器有width: 640px 时，它不会收缩包装输入元素。

移除固定宽度。

revised codepen

【讨论】：

显然我试过了。这不是我想要做的。我试图让整个容器适应输入的宽度。

那么显然你不应该在.modal-card 上使用width: 640px。将其切换为auto。 codepen.io/anon/pen/GWOWGY

明白。但正如你所见，容器不能短于 640px。您可以缩小容器或扩展输入以覆盖整个宽度。

是的。谢谢。作品

【参考方案2】：

你只需要添加：

header,
footer
  width: 100%;

所以它占用了所有可用的宽度。这是你想要的还是我错过了什么？

【讨论】：

是的，这个问题比这更复杂一点

能不能把你的问题解释清楚一点？

没有人。为什么要硬编码宽度？这是不好的做法。

您对输入宽度进行了硬编码，因此您的问题可能从哪里开始。是不是“期望”的输出，把硬编码的宽度放在一边，只是为了测试。