当flex-basis设置为0时，Flex子项不填充父容器

Question

我正在处理具有可变数量项目的4列网格。网格是响应式的，所以我没有使用像素/ em值而是使用百分比与calc组合来补偿正确的边距。

为了确保不均匀行的剩余框不调整大小并填充剩余空间，我将flex-basis属性设置为0.唯一的问题是框本身是填充父级的几个像素容器（注意项目如何不水平填充整个网格）。我该如何解决这个问题？

*,
*:before,
*:after {
  box-sizing: border-box;
  font-family: Helvetica;
}

.container {

}

.flex-container {
  display: flex;
  border: 4px solid #000;
  margin: 0 auto;
  width: 400px;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-child {
  flex: 0 1 calc(25% - 6px);
  background: tomato;
  padding: 10px;
  border: 5px solid red;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  margin-bottom: 6px;
}

.flex-child:not(:nth-of-type(4n)) {
  margin-right: 6px;
}

<div class="flex-container">
  <div class="flex-child">1</div>
  <div class="flex-child">2</div>
  <div class="flex-child">3</div>
  <div class="flex-child">4</div>
  <div class="flex-child">5</div>
  <div class="flex-child">6</div>
  <div class="flex-child">7</div>
  <div class="flex-child">8</div>
  <div class="flex-child">9</div>
  <div class="flex-child">10</div>
</div>

Answer 1

将var headers = new Headers(); headers.append('Content-Type', 'application/x-www-form-urlencoded'); let options = new RequestOptions({ headers: headers }); var body = "firstname=" + user.firstname + "&lastname=" + user.lastname + "&username=" + user.username + "&email=" + user.email + "&password=" + user.password; return new Promise((resolve) => { this.http.post("http://XXXXXXXXXXX/users/create", body, options).subscribe((data) => { if (data.json()) { resolve(data.json()); } else { console.log("Error"); } } ) }); 增加为right margin。

＆＃13;

＆＃13;

8px

＆＃13;

*,
*:before,
*:after {
  box-sizing: border-box;
  font-family: Helvetica;
}

.container {

}

.flex-container {
  display: flex;
  border: 4px solid #000;
  margin: 0 auto;
  width: 400px;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex-child {
  flex: 0 1 calc(25% - 6px);
  background: tomato;
  padding: 10px;
  border: 5px solid red;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  margin-bottom: 6px;
}

.flex-child:not(:nth-of-type(4n)) {
  margin-right: 8px;
}

＆＃13;

＆＃13;

＆＃13;