使用flexbox控制包装和盒子宽度

Question

您好我不熟悉在CSS中使用flexbox。 我有＆＃34;盒子＆＃34;我需要它们保持宽度，并在宽度较小时包裹 在大屏幕上：

在小屏幕上：

.container {
  margin-top: 1em;
  display: flex;
  justify-content: space-around;
  .item {
    flex-grow: 1;
    flex-basis: auto;
    text-align: center;
    margin-left: 1em;
    border:1px solid black;

  }
}

我需要保持盒子看起来像在大屏幕上一样，但最后一个包裹，并在中心，例如 这是代码笔：http://codepen.io/anon/pen/xwbNXY

谢谢。

Answer 1

如果我理解您的请求，您可以使用媒体查询为项目提供固定宽度（最小值），并将它们换行（pen）：

@media (max-width: 260px) {
  .container {
    flex-wrap: wrap; // make the items wrap

    .item {
      width: 30px; // give them a fixed width
      flex-grow: 0; // disable flex-grow
    }
  }
}