我需要纠正一下，最后一行子元素不足一行并不是当浏览器窗口小于300px，你的答案还是有误，

非常抱歉，我之前的回答仍然有误。感谢您的指正。

要实现您的要求，您可以使用`justify-content: center;`来使子元素整体居中对齐，然后通过使用媒体查询来在最后一行子元素不足一行时将其左对齐。

以下是更新后的CSS样式代码：

.parent-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.child-element {
  width: 300px;
  height: 200px;
}

@media (max-width: 900px) {
  .parent-container {
    justify-content: flex-start;
  }
}

这样设置后，子元素将会在父容器中整体居中对齐。当浏览器窗口宽度小于900px时，媒体查询会生效，将`justify-content`属性设置为`flex-start`，从而使最后一行子元素左对齐。

再次感谢您的指正，希望这次回答能满足您的要求。如有其他问题，请随时提问。

相关问题

但是，我的要求是整体的子元素居中对齐，只有当最后一行子元素不足一行的时候，让最后一行子元素左对齐，如果使用你的这个写法，那么所有子元素都会左对齐而不是居中对齐

非常抱歉，我之前的回答仍然有误。感谢您的指正。

要实现您的要求，您可以使用`justify-content: center;`来使子元素整体居中对齐，然后通过使用媒体查询来在最后一行子元素不足一行时将其左对齐。

以下是更新后的CSS样式代码：

.parent-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.child-element {
  width: 300px;
  height: 200px;
}

@media (max-width: 300px) {
  .parent-container {
    justify-content: flex-start;
  }
}

这样设置后，子元素将会在父容器中整体居中对齐。当最后一行子元素不足一行时（即浏览器窗口宽度小于300px），媒体查询会生效，将`justify-content`属性设置为`flex-start`，从而使最后一行子元素左对齐。

再次感谢您的指正，希望这次回答能满足您的要求。如有其他问题，请随时提问。

但是使用了justify-content，假设有多行子元素最后一行的子元素个数不足一行，那么最后一行的子元素会居中而不会左对齐

非常抱歉，我之前的回答有误。确实，使用`justify-content: center;`会导致最后一行的子元素居中对齐，而不是左对齐。

如果您希望最后一行的子元素左对齐，可以使用`justify-content: flex-start;`来代替`justify-content: center;`。这样设置后，子元素将会在父容器中左对齐，不足一行时也会靠左对齐。

以下是更新后的CSS样式代码：

.parent-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.child-element {
  width: 300px;
  height: 200px;
}

这样设置后，子元素将会横向排列，并在需要换行时自动换行。子元素会在父容器中水平和垂直居中对齐，并且最后一行的子元素会靠左对齐。

再次感谢您的指正，希望这次回答能满足您的要求。如有其他问题，请随时提问。