处理弹性盒和收缩到内容宽度的容器

Question

如何将容器保持在我指定的宽度，以便它不会\xe2\x80\x99t 收缩到其弹性项目的宽度？

\n\n

我注意到有效地取出类 \xe2\x80\x9cflex-center\xe2\x80\x9d 使容器保持其宽度，但元素不居中

\n\n

\xe2\x80\x94 我设法通过删除 \xe2\x80\x9cflex-center\xe2\x80\x9d 来解决此问题，将 \xe2\x80\x9c.subscribe\xe2\x80\x9d 的显示更改为阻止并使用自动边距居中，但是有没有办法可以将所有这些元素保留在 Flex 中？

\n\n

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

\n\n

\r\n

\r\n

.flex-center {\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n.container {\r\n  max-width: 600px;\r\n  padding-left: 20px;\r\n  padding-right: 20px;\r\n}\r\n\r\n.subscribe {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.s__text {\r\n  text-align: center;\r\n}\r\n\r\n.subscribe__input,\r\n.subscribe__button {\r\n  width: 200px\r\n}

\r\n

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

\r\n

\r\n

\r\n

\n

Answer 1

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

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

更新了小提琴

堆栈片段

.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到它。

更新了小提琴 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-shrink: 0。

更新了小提琴 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>