Question

我有一个有四个盒子的容器。整个容器都应该是窗口的宽度。

在720px以上，应该有四个框的一行。低于720像素时，应该有两行两框。在600像素以下，一个框应该有四行。

我对应该在媒体查询中添加的内容感到困惑。

html,
body {
  width: 100%;
  height: 100%;
}

.container {
  border: 1px solid black;
  display: flex;
  height: 100%;
  width: 100%;
}

.column {
  border: 1px solid red;
  flex: 1;
}

@media (max-width: 720px) {
  .container {
    ?
  }
}

@media (max-width: 600px) {
  .container {
    ?
  }
}

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

Answer 1

设置弹性项目以在断点处换行。

这里是fiddle demo。

.container {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
}

.column {
  flex: 1;
  border: 1px solid black;
  background-color: lightgray;
}

@media (max-width: 720px) {
  .column {
    flex-basis: 34%;
    background-color: orange;
  }
}

@media (max-width: 600px) {
  .column {
    flex-basis: 51%;
    background-color: lightgreen;
  }
}

body {
  margin: 0;
}

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

请注意，在flex-grow: 1速记中定义了flex的情况下，flex-basis不需要精确（25％，50％，100％），这可能导致包装不均等如果要添加页边空白。

由于flex-grow将消耗该行的可用空间，因此flex-basis仅需要足够大即可实施换行。这样可以确保有足够的空间留出边距，但没有足够的空间留出多余的物品。

Answer 2

您可以使用网格来实现。如果您像我在代码段中那样命名它们，很容易更改列的顺序。

.container {
      display: grid;
      grid-auto-rows: 200px;
      grid-auto-columns: auto;
      grid-template-areas:
      "column1 column2 column3 column4";
      border: 1px solid black;
      width: 100%;
      height: 100%;
    }

    .column {
      display: flex;
    }
    
    .column1 {
      grid-area: column1;
      background-color: red;
    }
    
    .column2 {
      grid-area: column2;
      background-color: yellow;
    }
    
    .column3 {
      grid-area: column3;
      background-color: green;
    }
    
    .column4 {
      grid-area: column4;
      background-color: blue;
    }

    @media (max-width: 720px) {
      .container {
        grid-template-areas:
        "column1 column2"
        "column3 column4";
      }
    }

    @media (max-width: 600px) {
      .container {
        grid-template-areas:
        "column1"
        "column2"
        "column3"
        "column4";
      }
    }

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <title>Page Title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="main.css">
    </head>
    <body>
      <div class="container">
        <div class="column column1"></div>
        <div class="column column2"></div>
        <div class="column column3"></div>
        <div class="column column4"></div>
      </div>
    </body>
    </html>

有关CSS here中的网格的更多信息

如何使用flexbox和媒体查询进行包装？

2 个答案: