html - 如何让我的 flexbox 网格有 2 行和 3 列，但仍然居中？

Question

所以我花了很多时间试图解决这个问题，但没有任何效果。我有 div，我想每行有 3 个，但居中。我试过选择第 4 个 div 并将其放到一个新行中，但这不起作用。

我试图阅读指南，但不太理解。如果有人能帮我解释一下，让我知道我做错了什么，那将不胜感激。

下图是我想要的全屏设备；我希望每行始终有 3 列。

/* general styles */

body {
  margin: 0;
}

h2 {
  text-align: center;
  text-decoration: overline underline;
  text-decoration-color: #fff;
}

.col li {
  list-style-type: none;
}

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
  /* these styles are called a clearfix (look it up) */
}


/* grid layout with flexbox */

.portfolio-col {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.col {
  margin: 1% 1.3%;
  /* equally space our boxes, instead of different left and right margins; specific numbers you can adjust */
  flex-shrink: 0;
  box-sizing: border-box;
  justify-content: center;
}

.col ul {
  padding-left: 0;
  text-align: center;
  width: 100%;
  max-width: 250px;
  /* same width and max-width as our images */
}

.col img {
  border-style: solid;
  border-color: blue;
  width: 100%;
  height: 100%;
  max-width: 250px;
  max-height: 250px;
}

.col:nth-child(4) {
  background-color: aqua;
  margin-left: 30%;
  flex-direction: column;
  flex-wrap: wrap;
  margin: auto;
  justify-content: center;
}

<section class="port-folio" id="portfolio">
  <div class="container">
    <h2>MY PROJECTS</h2>
    <div class="portfolio-col">
      <div class="col span_1_of_3">
        <img src="https://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
        </ul>
      </div>
      <div class="col span_1_of_3">
        <img src="https://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
          <li>Name: Player</li>
          <li>Created By: Doe</li>
          <li>Date: August 2017</li>
          <li>Language: Java</li>
          <li><a href="">More Info</a></li>
        </ul>
      </div>
      <div class="col span_1_of_3">
        <img src="https://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
          <li>Name: Game</li>
          <li>Created By: Doe</li>
          <li>Date: August 2017</li>
          <li>Language: Game Maker Language (GML)</li>
          <li><a href="">More Info</a></li>
        </ul>
      </div>
      <div class="col span_1_of_3">
        <img src="https://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
          <li>Name: Game</li>
          <li>Created By: Doe</li>
          <li>Date: August 2017</li>
          <li>Language: Game Maker Language (GML)</li>
          <li><a href="">More Info</a></li>
        </ul>
      </div>
      <div class="col span_1_of_3">
        <img src="https://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
          <li>Name: Game</li>
          <li>Created By: Doe</li>
          <li>Date: August 2017</li>
          <li>Language: Game Maker Language (GML)</li>
          <li><a href="">More Info</a></li>
        </ul>
      </div>
      <br>
      <div class="col span_1_of_3">
        <img src="https://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
          <li>Name: Game</li>
          <li>Created By: Doe</li>
          <li>Date: August 2017</li>
          <li>Language: Game Maker Language (GML)</li>
          <li><a href="">More Info</a></li>
        </ul>
      </div>
      <div class="col span_1_of_3">
        <img src="https://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
          <li>Name: Game</li>
          <li>Created By: Doe</li>
          <li>Date: August 2017</li>
          <li>Language: Game Maker Language (GML)</li>
          <li><a href="">More Info</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>

Answer 1

您只需更改 2 个属性并添加 2 个即可。

如果改为justify-content: space-around;在.portfolio-col规则，并添加 margin: 0 auto; max-width: 850px; ，您将获得连续 3 列，始终在更大的屏幕上居中。

.portfolio-col {
  display: flex;
  justify-content: space-around;        /* changed */
  flex-wrap: wrap;

  margin: 0 auto;                       /* added */
  max-width: 850px;                     /* added, 3 * 250px + margin/gutter */
}

由于不建议结合 Flexbox 使用百分比作为填充/边距(错误行为)，我更改了顶部/底部 margin在 .col来自 1%至 1vh ( Viewport-percentage units ), 当我们使用 space-around 时在 .portfolio-col 上, 不需要左/右页边距，所以我将它设置为 5px所以他们在边缘关闭之前在较窄的屏幕上换行

.col {
  margin: 1vh 5px;                      /* changed */
  flex-shrink: 0;
  box-sizing: border-box;
}

请注意，我还删除了 <br>你在你的标记中有一些属性，其中包括 .col:nth-child(4)规则

堆栈片段

/* general styles */

body {
  margin: 0;
}

h2 {
  text-align: center;
  text-decoration: overline underline;
  text-decoration-color: #fff;
}

.col li {
  list-style-type: none;
}

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
  /* these styles are called a clearfix (look it up) */
}


/* grid layout with flexbox */

.portfolio-col {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  
  margin: 0 auto;
  max-width: 850px;
}

.col {
  margin: 1vh 5px;
  /* equally space our boxes, instead of different left and right margins; specific numbers you can adjust */
  flex-shrink: 0;
  box-sizing: border-box;
}

.col ul {
  padding-left: 0;
  text-align: center;
  width: 100%;
  max-width: 250px;
  /* same width and max-width as our images */
}

.col img {
  border-style: solid;
  border-color: blue;
  width: 100%;
  height: 100%;
  max-width: 250px;
  max-height: 250px;
}

.col:nth-child(4) {
  background-color: aqua;
}

<section class="port-folio" id="portfolio">
  <div class="container">
    <h2>MY PROJECTS</h2>
    <div class="portfolio-col">
      <div class="col span_1_of_3">
        <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
        </ul>
      </div>
      <div class="col span_1_of_3">
        <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
          <li>Name: Player</li>
          <li>Created By: Doe</li>
          <li>Date: August 2017</li>
          <li>Language: Java</li>
          <li><a href="">More Info</a></li>
        </ul>
      </div>
      <div class="col span_1_of_3">
        <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
          <li>Name: Game</li>
          <li>Created By: Doe</li>
          <li>Date: August 2017</li>
          <li>Language: Game Maker Language (GML)</li>
          <li><a href="">More Info</a></li>
        </ul>
      </div>
      <div class="col span_1_of_3">
        <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
          <li>Name: Game</li>
          <li>Created By: Doe</li>
          <li>Date: August 2017</li>
          <li>Language: Game Maker Language (GML)</li>
          <li><a href="">More Info</a></li>
        </ul>
      </div>
      <div class="col span_1_of_3">
        <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
          <li>Name: Game</li>
          <li>Created By: Doe</li>
          <li>Date: August 2017</li>
          <li>Language: Game Maker Language (GML)</li>
          <li><a href="">More Info</a></li>
        </ul>
      </div>
      <div class="col span_1_of_3">
        <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
          <li>Name: Game</li>
          <li>Created By: Doe</li>
          <li>Date: August 2017</li>
          <li>Language: Game Maker Language (GML)</li>
          <li><a href="">More Info</a></li>
        </ul>
      </div>
      <div class="col span_1_of_3">
        <img src="http://swords.cc/lotzine/250x250.gif" alt="Smiley face">
        <ul class="project-info">
          <li>Name: Game</li>
          <li>Created By: Doe</li>
          <li>Date: August 2017</li>
          <li>Language: Game Maker Language (GML)</li>
          <li><a href="">More Info</a></li>
        </ul>
      </div>
    </div>
  </div>
</section>