尝试使用媒体查询和Flexbox对项目进行响应式设计，但它不起作用

Question

<div class="container">
        <div class="item">content</div>
        <div class="item">content</div>
</div>

        .container{
            display:flex;
            justify-content: center;
            align-items: center; 
            flex-wrap:wrap ;
            flex-direction: column;
        }
       .item{
            margin: 10px;
            border: 1px solid lightgray;
            border-radius: 10px;
            overflow: hidden;
            width: 100%;
        }
        @media screen and (min-width:700px) {
            .item{
                width: 50%;
            }
            .container{
                flex-direction: row;
            }
        }

我期待一种响应式设计，当屏幕低于 700px 时，项目是柱状的，当屏幕宽度超过 700px 时，项目是连续的，它们的宽度是 50%。但看起来只是

width:50%;

正在申请。 这是图片:

Answer 1

您需要考虑

.item

元素的

border-left-width

、

border-right-width

、

margin-left

和

margin-right

。在视口宽度大于

700px

的代码中，每个

.item

元素占用以下水平空间量：

50% + 10px + 10px + 1px + 1px = 50% + 22px
 ↑      ↑      ↑     ↑     ↑
`width` │`margin-right`    │
        │            │     │
  `margin-left`      │`border-right-width`
                     │
          `border-left-width`

因此，对于 2 个

50% + 22px

宽度的项目，这将

44px

大于

100%

（

.container

的宽度），因此将继续以大于

700px

的视口宽度换行。

要让它们显示在同一行中，请考虑调整其

width

，补偿水平边框宽度和水平边距的额外空间：

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

.item {
  margin: 10px;
  border: 1px solid lightgray;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}

@media screen and (min-width:700px) {
  .item {
    width: calc(50% - 22px);
  }
  .container {
    flex-direction: row;
  }
}

<div class="container">
  <div class="item">content</div>
  <div class="item">content</div>
</div>

Answer 2

您正在使用

min-width: 700px

，这意味着当屏幕宽度至少为 700px 时，将应用媒体查询内的样式。但是，您想要相反的结果：您希望在屏幕宽度小于 700px 时应用样式。为此，您需要使用

max-width: 700px

来代替。

您使用

flex-direction: column

作为容器，这意味着物品将垂直堆叠。然而，您想要相反的结果：您希望项目水平堆叠。为此，您需要使用

flex-direction: row

来代替。

您需要更改媒体查询和 flex-direction 值，如下所示：

.container{
  display:flex;
  justify-content: center;
  align-items: center; 
  flex-wrap:wrap ;
  flex-direction: row; /* change this to row */
}
.item{
  margin: 10px;
  border: 1px solid lightgray;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}
@media screen and (max-width:700px) { /* change this to max-width */
  .item{
   width: 50%;
  }
  .container{
   flex-direction: column; /* change this to column */
  }
}