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

CSS flexbox响应div

1 个答案: