如何使用flexbox設置容器的最大寬度？

Question

我想使services-bar__title和services-bar__services的max-width為1024px以便按以下格式獲得容器的正常flexbox行為，但是如果視口較寬，則列表的擴展范圍不會超過1024px 。 我嘗試設置容器的寬度和最大寬度，但是由於容器不再居中，它似乎無法按預期工作，有什么想法嗎？

 .services-bar { display: flex; flex-direction: column; height: 20rem; width: 100%; box-shadow: 0 -3rem 8rem rgba(#000, 0.5); } .services-bar__title { display: flex; flex-direction: row; justify-content: center; } .services-bar__services { display: flex; flex-direction: row; justify-content: center; } 

 <div class="services-bar"> <div class="services-bar__title"> test title </div> <div class="services-bar__services"> <div class="services-bar__services_1"></div> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> <div class="services-bar__services_2"></div> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> <div class="services-bar__services_3"></div> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> <div class="services-bar__services_4"></div> <ul> <li>test</li> <li>test</li> <li>test</li> </ul> </div> </div> 

Answer 1

如果我對您的理解正確，則希望將服務擴展到100％（最大1024px）。 對？

為此，您需要將默認寬度設置為100％，並將最大寬度設置為1024px。

 .services-bar { display: flex; flex-direction: column; width: 100%; box-shadow: 0 -3rem 8rem rgba(0, 0, 0, 0.5); max-width: 1024px; .services-bar__title { display: flex; flex-direction: row; justify-content: center; } .services-bar__services { display: flex; flex-direction: row; justify-content: center; } .services-bar__services_1, .services-bar__services_2, .services-bar__services_3, .services-bar__services_4 {} 

 <div class="services-bar"> <div class="services-bar__title"> test title </div> <div class="services-bar__services"> <div class="services-bar__services_1"></div> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> <div class="services-bar__services_2"></div> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> <div class="services-bar__services_3"></div> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> <div class="services-bar__services_4"></div> <ul> <li>test</li> <li>test</li> <li>test</li> </ul> </div> </div> 

Answer 2

如果我正確理解這是什么意思？ 然后，您可以使用媒體查詢來解決您的問題。 我在大於1024像素的設備上將max-width to none設置max-width to none 。

 .services-bar { display: flex; flex-direction: column; height: 20rem; width: 100%; box-shadow: 0 -3rem 8rem rgba(#000, 0.5); } .services-bar__title { display: flex; flex-direction: row; justify-content: center; background: red; max-width: 1024px; } .services-bar__services { display: flex; flex-direction: row; justify-content: center; background:green; max-width: 1024px; } @media only screen and (min-width : 1024px) { .services-bar__services {max-width: none;} .services-bar__title {max-width: none;} } 

 <div class="services-bar"> <div class="services-bar__title"> test title </div> <div class="services-bar__services"> <div class="services-bar__services_1"></div> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> <div class="services-bar__services_2"></div> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> <div class="services-bar__services_3"></div> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> <div class="services-bar__services_4"></div> <ul> <li>test</li> <li>test</li> <li>test</li> </ul> </div> </div> 

Answer 3

為此，您無需使services-bar成為flex ，而只需將services-bar__title和services-bar__services為flex 。

使用justify-content: space-around; 在services-bar__services中將項目分布在整個容器中。 對於services-bar ，設置max-width: 1024px; 以及margin: 0 auto; 使其保持居中，並且不要超過1024px 。

試試看：

 body { margin: 0; } .total-width { width: 100%; height: 40px; background-color: blue; } .width-1024px { max-width: 1024px; margin: 0 auto; height: 40px; background-color: yellow; } .services-bar { height: 20rem; box-shadow: 0 -3rem 8rem rgba(#000, 0.5); max-width: 1024px; margin: 0 auto; } .services-bar__title { display: flex; flex-direction: row; justify-content: center; } .services-bar__services ul { display: flex; flex-direction: row; justify-content: space-around; padding: 0; } 

 <div class="total-width"></div> <div class="width-1024px"></div> <div class="services-bar"> <div class="services-bar__title"> test title </div> <div class="services-bar__services"> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> </div> <div class="services-bar__services"> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> </div> <div class="services-bar__services"> <ul> <li>test</li> <li>test</li> <li>test</li> <li>test</li> </ul> </div> <div class="services-bar__services"> <ul> <li>test</li> <li>test</li> <li>test</li> </ul> </div> </div> 

這是jsfiddle： http : //jsfiddle.net/yostrh8n/25/

Answer 4

如果我理解正確，則您希望容器擴展到1024px以上。 我假設1024px是父元素的寬度，這意味着您可以使用以下代碼將子元素擴展到父元素之外。

width: 100vw;
margin-left: calc(50% - 50vw);

這會將寬度擴展到視口寬度（100vw-是視口的100％）。 問題在於，邊距將設置為父元素的邊距。 要解決此問題，您必須使用左邊距。 為了響應，您需要使用calc。