html - 灵活响应移动

Question

美好的一天。

我有 flex 布局的例子

<style>
.items {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-top: -10px;
}
.items .item {
    flex: 1 0 200px;
    box-sizing: border-box;
    background: #e0ddd5;
    color: #171e42;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
}
</style>
<div class="items">
    <div class="item">Heriberto Nickel</div>
    <div class="item">Brittaney Haliburton</div>
    <div class="item">Maritza Winkler</div>
    <div class="item">Carmon Rigg</div>
    <div class="item">Alice Marmon</div>
    <div class="item">Lyman Steakley</div>
    <div class="item">Zenia Correa</div>
</div>

所以当我的浏览器窗口大小时，一切正常(见下图)

但是如果我使用 dev tools chrome(见下图)

你可以看到一切都不正常 - 我需要每一行都在彼此下面。 (见下图)

请告诉我如何修复它。谢谢

Answer 1

您可以将 .items 最初设置为 flex: 1 0 100%，而不是 200px，这将强制每个元素位于其自己的行上，然后使用当视口(viewport)处于特定宽度或更大时，媒体查询将 .item 元素的 flex-basis 设置为 200px。

在下面的示例中，我已指定视口(viewport)的宽度必须至少为 400 像素才能触发更改，但您可以将其更改为适合您目的的任何值。

您可以阅读更多关于 media queries here 的信息.

<style>
.items {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-top: -10px;
}
.items .item {
    flex: 1 0 100%;
    box-sizing: border-box;
    background: #e0ddd5;
    color: #171e42;
    padding: 10px;
    margin-left: 10px;
    margin-top: 10px;
}

@media screen and (min-width: 400px) {
  .items .item {
    flex-basis: 200px;
  }
}
</style>
<div class="items">
    <div class="item">Heriberto Nickel</div>
    <div class="item">Brittaney Haliburton</div>
    <div class="item">Maritza Winkler</div>
    <div class="item">Carmon Rigg</div>
    <div class="item">Alice Marmon</div>
    <div class="item">Lyman Steakley</div>
    <div class="item">Zenia Correa</div>
</div>