处理 flexbox 和容器缩小到内容的宽度

Question

如何将容器保持在我指定的宽度，使其不会缩小到其弹性项目的宽度？

我注意到去掉“flex-center”类可以有效地保持容器的宽度，但元素没有居中

——我设法通过删除“flex-center”、将“.subscribe”的显示更改为阻止并使用自动边距将其居中来解决问题，但是有没有办法可以将所有这些元素保留在弯曲？

示例： https://jsfiddle.net/krv9z0co/6/

.flex-center {
  display: flex;
  justify-content: center;
}

.container {
  max-width: 600px;
  padding-left: 20px;
  padding-right: 20px;
}

.subscribe {
  display: flex;
  flex-direction: column;
}

.s__text {
  text-align: center;
}

.subscribe__input,
.subscribe__button {
  width: 200px
}

<section class="flex-center">
  <div class="subscribe container">
    <div class="sub__head">
      <h3 class="s__text">Subscribe</h3>
      <p class="s__text">Be the first to know about the new templates.</p>
    </div>
    <div class="sub__move">
      <input type="text" class="subscribe__input sub__block" placeholder="Your Email">
      <input type="submit" value="SUBSCRIBE" class="subscribe__button">
    </div>
  </div>
</section>

Answer 1

弹性项目的默认flex-shrink 值为1。这意味着它被设置为收缩以适应它的父级。

如果您将flex-shrink: 0; 添加到container，它将保持其宽度。

Updated fiddle

堆栈sn-p

.flex-center {
  display: flex;
  justify-content: center;
}

.container {
  max-width: 600px;
  padding-left: 20px;
  padding-right: 20px;
  flex-shrink: 0;                  /*  added  */
}

.subscribe {
  display: flex;
  flex-direction: column;
}

.s__text {
  text-align: center;
}

.subscribe__input,
.subscribe__button {
  width: 200px
}

<section class="flex-center">
  <div class="subscribe container">
    <div class="sub__head">
      <h3 class="s__text">Subscribe</h3>
      <p class="s__text">Be the first to know about the new templates.</p>
    </div>
    <div class="sub__move">
      <input type="text" class="subscribe__input sub__block" placeholder="Your Email">
      <input type="submit" value="SUBSCRIBE" class="subscribe__button">
    </div>
  </div>
</section>

---

根据评论更新。

在填充其父级宽度时，弹性行项目与普通的 div 不同，后者的行为更像 inline-block 并根据其内容进行调整。

因此，如果您希望container 更像block 元素（尝试填充其父元素的宽度），请同时添加flex-grow: 1。

Updated fiddle 2

堆栈 sn-p 2

.flex-center {
  display: flex;
  justify-content: center;
}

.container {
  max-width: 600px;
  padding-left: 20px;
  padding-right: 20px;
  flex-shrink: 0;                  /*  added  */
  flex-grow: 1;                    /*  added  */
}

.subscribe {
  display: flex;
  flex-direction: column;
}

.s__text {
  text-align: center;
}

.sub__move {                       /*  keep this if to center input/button  */
   text-align: center;
}

.subscribe__input,
.subscribe__button {
  width: 200px
}

<section class="flex-center">
  <div class="subscribe container">
    <div class="sub__head">
      <h3 class="s__text">Subscribe</h3>
      <p class="s__text">Be the first to know about the new templates.</p>
    </div>
    <div class="sub__move">
      <input type="text" class="subscribe__input sub__block" placeholder="Your Email">
      <input type="submit" value="SUBSCRIBE" class="subscribe__button">
    </div>
  </div>
</section>

---

根据评论更新 2。

如果您还希望内容开始换行，就像使用 display: block 时所做的那样，您需要让弹性项目再次收缩，然后简单地删除 flex-shrink: 0。

Updated fiddle 3

堆栈 sn-p 3

.flex-center {
  display: flex;
  justify-content: center;
}

.container {
  max-width: 600px;
  padding-left: 20px;
  padding-right: 20px;
  flex-grow: 1;                    /*  added  */
}

.subscribe {
  display: flex;
  flex-direction: column;
}

.s__text {
  text-align: center;
}

.sub__move {                       /*  keep this if to center input/button  */
   text-align: center;
}

.subscribe__input,
.subscribe__button {
  width: 200px
}

<section class="flex-center">
  <div class="subscribe container">
    <div class="sub__head">
      <h3 class="s__text">Subscribe</h3>
      <p class="s__text">Be the first to know about the new templates.</p>
    </div>
    <div class="sub__move">
      <input type="text" class="subscribe__input sub__block" placeholder="Your Email">
      <input type="submit" value="SUBSCRIBE" class="subscribe__button">
    </div>
  </div>
</section>

Answer 2

Flexbox 总是将其布局应用于直接子级。从 .flex-container 中移除 display flex。并在 .container 类中添加 margin: auto 和 text-align: center 。希望它能解决问题。

.flx-center {
    
    
}

.container{
    max-width: 600px;
    padding-left: 20px;
    padding-right: 20px;
    margin: auto; 
    text-align: center;
}

.subscribe{
  display: flex;
   flex-direction: column;
}

.s__text{
  text-align: center;
}

.subscribe__input,
.subscribe__button{
  width: 200px
}

<section class="flx-center">
        <div class="subscribe container">
            <div class="sub__head">
                <h3 class="s__text">Subscribe</h3>
                <p class="s__text">Be the first to know about the new templates.</p>
            </div>
            <div class="sub__move">
                <input type="text" class="subscribe__input sub__block" placeholder="Your Email">
                <input type="submit" value="SUBSCRIBE" class="subscribe__button">
            </div>
        </div>
    </section>