居中伸缩布局，不缩小列

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/