如何使我的 flexbox 网格有 2 行和 3 列，但仍然居中？答案

【问题标题】：How can I make my flexbox grid have 2 rows and 3 columns, but still be centered?如何使我的 flexbox 网格有 2 行和 3 列，但仍然居中？
【发布时间】：2017-08-24 13:09:38
【问题描述】：

所以我花了很多时间试图解决这个问题，但没有任何效果。我有 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>

【问题讨论】：

标签： html css flexbox centering

【解决方案1】：

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

如果您在.portfolio-col 规则中更改为justify-content: space-around; 并添加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 结合使用（错误行为），我将 .col 中的顶部/底部 margin 从 1% 更改为 1vh (Viewport-percentage units) ，并且当我们在.portfolio-col 上使用space-around 时，不需要左右边距，因此我将其设置为5px，以便它们在边缘关闭之前在较窄的屏幕上换行

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

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

堆栈sn-p

/* 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>

【讨论】：

好吧，我明白了，所以您将 justify-content 更改为 space-around，因为它为您提供了左右两侧的空间，对吗？并且 /* 添加了 3 * 750px + margin/gutter */ 什么是 margin/gutter？你是在做3（列数*宽度250，即750）而不是加100吗？我只是想知道，如果我想说一行有 2,4 或 8 列或其他什么。
@Cmi 是的，这是正确的。我错误地写了3 * 750px，应该是3 * 250px（更新了我的答案）。而额外的 100 是为物品留出空间，其中还包括弥补.col 上设置的 5px 左右边距。这意味着额外的 100 不能小于 (3 * 250px) + (3 * (5px + 5px)) 否则将不适合，在这种情况下，连续 3 个项目

【解决方案2】：

这是我的工作jsFiddle :)

*{ box-sizing: border-box; }

.port-folio h2{ text-align: center; }
.portfolio-col {
    text-align: center;
    overflow: hidden; 
    padding: 5px;
    clear: both;
}
.port-folio ul{ list-style: none; padding: 0; margin: 25px 0 0; }
.port-folio ul li{ display: block; }
.col{
   width: 31.33%;
   border: 1px solid black; 
   float: left;
   padding: 5px;
   margin: 15px 1%;
}

    <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">
          <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>

希望对您有所帮助。 :)

【讨论】：

【解决方案3】：

h2 {
      text-align: center;

    }

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

    .portfolio-col {
      display: flex;
      flex-wrap: wrap;
    }

    .col {
        align-items: center;
         box-sizing: border-box;
        display: flex;
        flex: 1 0 28%;
        flex-direction: column;
        margin: 1% 1.3%;

    }

    .col ul {
      padding-left: 0;
      text-align: center;
      width: 100%;
      max-width: 250px;
      }
    .col img {
      border-style: solid;
      border-color: blue;
      width: 100%;
      height: 100%;
      max-width: 250px;
      max-height: 250px;
    }

【讨论】：