CSS flexbox 响应式 div

Question

我有以下代码笔:http://codepen.io/AlexanderWeb00/pen/NpKyRm

低于 500px 我希望 2 个 div 彼此相邻，所以我将宽度更改为 50%

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: auto;
    max-width: 960px;
}

// * {
//   box-sizing: border-box;
// }

.container__item {
    align-content: center;
    border: 1px solid #333;
    display: flex;
    flex-basis: 1;
    font-size: 3em;
    justify-content: center;
    margin-bottom: 1em;

    // maintain aspect ratio 
    width: 24%;
}

@media screen and (max-width: 500px){ 
  .container__item {
      width: 50%;
  }
}

但他们只是互相卡住。

Answer 1

元素上的边框创建的宽度大于 50%。添加此内容以确保不会发生这种情况:

.container__item {
    box-sizing: border-box;
}

codepen

为了更好的间距，改变这个:

@media screen and (max-width: 500px){ 
  .container__item {
      width: 49%;
  }
}