居中 flex 布局而不收缩列

Question

我在 flexbox 内部有一个网格，flex-flow 设置为 column nowrap。网格没有固定数量的列 grid-template-columns: repeat(auto-fill, 270px)。

我的问题是，当我试图将 flexbox 中的网格居中时，它并没有占用尽可能多的 space，而是只是将列数减少到 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

在您的 flexbox 容器 (.portfolio) 中，删除 align-items:center 并注意 flexbox 使用 justify-content 而不是 justify-items。这似乎可以完成工作。

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

Fiddle: https://jsfiddle.net/osayky9b/

编辑：居中网格：https://jsfiddle.net/osayky9b/8/

Answer 2

您必须在 .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 3

在主容器上从 column nowrap 切换到 row wrap。然后用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>

居中 flex 布局而不收缩列

Center flex layout without shrinking the column

html

css

flexbox

css-grid

jsFiddle demo