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

Question

如何使容器保持我指定的宽度，使其不会收缩到其 flex 元素的宽度？

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

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

例子: 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 元素的默认 flex-shrink 值为 1。这意味着它被设置为收缩以适应它的父级。

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

Updated fiddle

堆栈片段

.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>

---

根据评论更新。

flex 行元素在填充其父元素的宽度时不同于普通的 div，它更像是一个 inline-block 并根据其内容进行调整。

因此，如果您希望 container 更像一个 block 元素(尝试填充其父元素的宽度)，还可以添加 flex-grow: 1 给它。

Updated fiddle 2

堆栈片段 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 元素再次收缩，只需删除 flex-shrink: 0。

Updated fiddle 3

堆栈片段 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>