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

Question

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

这是我的工作 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>

希望对您有所帮助。 :)

Answer 2

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;
    }

Answer 3

您只需更改 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 */
}

由于不建议将 paddings/margins 的百分比与 Flexbox 结合使用（错误行为），我将 .col 中的 top/bottom margin 从 1% 到 1vh (Viewport-percentage units)，并且当我们在 .portfolio-col 上使用 space-around 时，不需要 left/right 边距，所以我将其设置为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>

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

How can I make my flexbox grid have 2 rows and 3 columns, but still be centered?

html

css

centering

flexbox