中心柔性布局而不缩小列

时间：2018-03-28 16:45:30

标签： html css css3 flexbox css-grid

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

我的问题是，当我试图将该网格放在flexbox中时，它不会占用尽可能多的空间，而只是将列数减少到1。

我希望网格有4列，除非它即将从容器中溢出。我如何实现这一目标？我试图在网格上设置margin: 0 auto;，但它会产生相同的结果。

目前的结果： enter image description here

期望的结果+列必须换行而不是溢出： enter image description here

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>

3 个答案:

答案 0 :(得分：2)

您必须在width: 100%上使用.portfolio-grid。它只需要一列，因为您没有给它任何宽度。因此它的宽度取决于它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>

答案 1 :(得分：1)

从主容器上的column nowrap切换到row wrap。然后强制每个项目使用flex-basis: 100%占据整行。然后，水平定心变得简单易行。

这是您修改的代码。我删除了一些与问题无关的视觉样式。

＆＃13;
＆＃13; 
.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; }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

jsFiddle demo

答案 2 :(得分：0)

在您的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/

相关问题
最新问题