居中伸縮布局，不縮小列

Question

我在flexbox內部有一個網格，其中flex-flow設置為column nowrap 。 網格沒有固定數量的列grid-template-columns: repeat(auto-fill, 270px) 。

我的問題是，當我嘗試在Flexbox中將該網格居中時，它不會占用盡可能多的空間，而只是將列數減少為1。

我希望網格有4列，除非它將要從容器中溢出。 我該如何實現？ 我試圖設置margin: 0 auto; 在網格上，但產生相同的結果。

當前結果：

所需的結果+列必須換行而不是溢出：

HTML / CSS
我為網格設置了min-width: 300px ，因為它包含寬度為270px + 10px間隙的圖片。 我設置了max-width: calc(4 * 280px)因為我不想有超過4列。

 .portfolio { min-height: 1004px; display: flex; flex-flow: column nowrap; justify-items: center; align-items: center; } .portfolio-heading { margin: 50px 0px 0px 0px; font-family: Lato; font-size: 30px; font-weight: 900; color: #616161; line-height: 2; text-align: center; } .portfolio-text { margin: 5px 0px 0px 0px; font-family: "Lato"; font-size: 20px; font-weight: 300; color: #616161; text-align: center; } .portfolio-nav-row { display: flex; flex-flow: row wrap; justify-content: center; margin: 60px 0px 15px 0px; padding-right: 10px; } .portfolio-nav-row-btn { padding: 10px 19px; margin-left: 10px; border: 1px solid #ff6760; border-radius: 5px; background-color: #ff6760; color: #ffffff; font-family: "Lato"; font-size: 12px; font-weight: 700; text-transform: uppercase; cursor: pointer; } .portfolio-grid { max-width: calc(4 * 280px); min-width: 300px; display: grid; grid-template-columns: repeat(auto-fill, 270px); grid-gap: 10px; justify-items: center; overflow: hidden; } 

 <section class="portfolio"> <h1 class="portfolio-heading">Our Featured Works</h1> <p class="portfolio-text">Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p> <div class="portfolio-nav-row"> <button class="portfolio-nav-row-btn all-btn" type="button">All</button> <button class="portfolio-nav-row-btn graphic-btn" type="button">Graphic</button> <button class="portfolio-nav-row-btn illustration-btn" type="button">Illustration</button> <button class="portfolio-nav-row-btn motion-btn" type="button">Motion</button> </div> <div class="portfolio-grid"> <img class="portfolio-grid-item portfolio-grid-row1-column1" src="pictures/portfolio-1.png" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row1-column2" src="pictures/portfolio-2.png" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row1-column3" src="pictures/portfolio-3.png" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row1-column4" src="pictures/portfolio-4.png" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row2-column1" src="pictures/portfolio-5.png" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row2-column2" src="pictures/portfolio-6.png" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row2-column3" src="pictures/portfolio-7.png" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row2-column4" src="pictures/portfolio-8.png" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row3-column1" src="pictures/portfolio-9.png" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row3-column2" src="pictures/portfolio-10.png" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row3-column3" src="pictures/portfolio-11.png" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row3-column4" src="pictures/portfolio-12.png" alt="portfolio image"> </div> </section> 

Answer 1

您必須在.portfolio-grid上使用width: 100% 。 它只占用一列，因為您沒有給它任何寬度。 因此，其寬度取決於其min-width值。 我已經在我的CodePen上檢查了它，並且width: 100%可以正常工作。

 .portfolio { min-height: 1004px; display: flex; flex-flow: column nowrap; justify-items: center; align-items: center; } .portfolio-heading { margin: 50px 0px 0px 0px; font-family: Lato; font-size: 30px; font-weight: 900; color: #616161; line-height: 2; text-align: center; } .portfolio-text { margin: 5px 0px 0px 0px; font-family: "Lato"; font-size: 20px; font-weight: 300; color: #616161; text-align: center; } .portfolio-nav-row { display: flex; flex-flow: row wrap; justify-content: center; margin: 60px 0px 15px 0px; padding-right: 10px; } .portfolio-nav-row-btn { padding: 10px 19px; margin-left: 10px; border: 1px solid #ff6760; border-radius: 5px; background-color: #ff6760; color: #ffffff; font-family: "Lato"; font-size: 12px; font-weight: 700; text-transform: uppercase; cursor: pointer; } .portfolio-grid { max-width: calc(4 * 280px); min-width: 300px; display: grid; grid-template-columns: repeat(auto-fill, 300px); grid-gap: 10px; justify-content: center; overflow: hidden; width: 100%; } 

 <section class="portfolio"> <h1 class="portfolio-heading">Our Featured Works</h1> <p class="portfolio-text">Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p> <div class="portfolio-nav-row"> <button class="portfolio-nav-row-btn all-btn" type="button">All</button> <button class="portfolio-nav-row-btn graphic-btn" type="button">Graphic</button> <button class="portfolio-nav-row-btn illustration-btn" type="button">Illustration</button> <button class="portfolio-nav-row-btn motion-btn" type="button">Motion</button> </div> <div class="portfolio-grid"> <img class="portfolio-grid-item portfolio-grid-row1-column1" src="http://placehold.it/270x270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row1-column2" src="http://placehold.it/270x270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row1-column3" src="http://placehold.it/270x270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row1-column4" src="http://placehold.it/270x270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row1-column1" src="http://placehold.it/270x270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row1-column2" src="http://placehold.it/270x270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row1-column3" src="http://placehold.it/270x270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row1-column4" src="http://placehold.it/270x270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row1-column1" src="http://placehold.it/270x270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row1-column2" src="http://placehold.it/270x270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row1-column3" src="http://placehold.it/270x270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row1-column4" src="http://placehold.it/270x270" alt="portfolio image"> </div> </section> 

Answer 2

從column nowrap切換到主容器上的row wrap 。 然后用flex-basis: 100%強制每個項目占據整行flex-basis: 100% 。 這樣，水平居中就變得容易了。

這是帶有修訂的代碼。 我刪除了一些與問題無關的視覺樣式。

 .portfolio { display: flex; flex-flow: row wrap; justify-content: center; text-align: center; } .portfolio-heading { flex-basis: 100%; } .portfolio-text { flex-basis: 100%; } .portfolio-nav-row { flex-basis: 100%; display: flex; flex-flow: row wrap; justify-content: center; } .portfolio-nav-row-btn { padding: 10px 19px; background-color: #ff6760; color: #ffffff; cursor: pointer; } .portfolio-nav-row-btn+.portfolio-nav-row-btn { margin-left: 10px; } .portfolio-grid { max-width: calc(4 * 280px); display: grid; grid-template-columns: repeat(auto-fill, 270px); grid-gap: 10px; flex-basis: 100%; justify-content: center; } body { margin: 0; } 

 <section class="portfolio"> <h1 class="portfolio-heading">Our Featured Works</h1> <p class="portfolio-text">Curabitur blandit tempus porttitor. Maecenas faucibus mollis interdum.</p> <div class="portfolio-nav-row"> <button class="portfolio-nav-row-btn all-btn" type="button">All</button> <button class="portfolio-nav-row-btn graphic-btn" type="button">Graphic</button> <button class="portfolio-nav-row-btn illustration-btn" type="button">Illustration</button> <button class="portfolio-nav-row-btn motion-btn" type="button">Motion</button> </div> <div class="portfolio-grid"> <img class="portfolio-grid-item portfolio-grid-row1-column1" src="http://i.imgur.com/60PVLis.png" width="270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row1-column2" src="http://i.imgur.com/60PVLis.png" width="270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row1-column3" src="http://i.imgur.com/60PVLis.png" width="270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row1-column4" src="http://i.imgur.com/60PVLis.png" width="270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row2-column1" src="http://i.imgur.com/60PVLis.png" width="270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row2-column2" src="http://i.imgur.com/60PVLis.png" width="270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row2-column3" src="http://i.imgur.com/60PVLis.png" width="270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row2-column4" src="http://i.imgur.com/60PVLis.png" width="270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row3-column1" src="http://i.imgur.com/60PVLis.png" width="270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row3-column2" src="http://i.imgur.com/60PVLis.png" width="270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row3-column3" src="http://i.imgur.com/60PVLis.png" width="270" alt="portfolio image"> <img class="portfolio-grid-item portfolio-grid-row3-column4" src="http://i.imgur.com/60PVLis.png" width="270" alt="portfolio image"> </div> </section> 

jsFiddle演示

Answer 3

在您的flexbox容器（ .portfolio ）中，刪除align-items:center並注意flexbox使用justify-content而不是justify-items 。 這似乎可以完成工作。

.portfolio {
    min-height: 1004px;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
}

小提琴： https : //jsfiddle.net/osayky9b/

編輯：居中網格： https ： //jsfiddle.net/osayky9b/8/