處理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將保持其寬度。

更新了小提琴

堆棧代碼段

 .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項再次收縮，並簡單地刪除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> 

Answer 2

Flexbox始終將其布局應用於直接子項。 從.flex-container中刪除display flex。 並添加margin：auto和text-align：center in .container class。 希望它能解決這個問題。

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