html - Flex 响应式移动

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>

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

但是如果我使用开发工具 chrome（见下图）

你可以看到一切工作不正常——我需要每一行都在彼此之下。（见下图）

请告诉我如何解决它。谢谢

标签： htmlcssflexbox

Answer 1

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

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

您可以在此处阅读有关媒体查询的更多信息。

<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>