html - 将带有媒体查询 1 - 2 的 flexbox 重新组织为 2 -1

Question

我正在寻找使用 flexbox 进行响应式设计。但我有一些问题要在我的两种观点之间切换。也许有人知道如何解决这个问题。

.box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}

.box>* {
  flex: 1 1 160px;
  border: 1px solid blue;
  margin: 5px;
  padding: 50px;
}

.flex-item {
  border: 1px solid blue;
  margin: 5px;
  padding: 50px;
}

<article class="box">
  <p class="a">box a lorem ipsum ipsum </p>
  <p class="b">box b lorem ipsum ipsum </p>
  <p class="c">box c lorem ipsum ipsum </p>
</article>

标签： htmlcssflexboxresponsive

Answer 1

您可以将CSS Grid与Media Queries一起使用。请全屏查看输出并将其缩小到所需宽度以下，即 600 像素。我已经在评论中解释了代码。

输出：

.grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr; /* 2 columns of 2 fractions and 1 fraction each */
  grid-template-rows: 1fr 1fr; /* 2 rows of a fraction each */
}

.box-a {
  grid-area: 1 / 1 / 2 / 2; /* Start at Row 1, Start at Column 1. End at Row 2, End at Column 2 */
}

.box-b {
  grid-area: 1 / 2 / 3 / 3;
}

.box-c {
  grid-area: 2 / 1 / 2 / 2;
}

@media (max-width: 600px) { /* Target for screens below width of 600px */
  .box-b {
    grid-area: 1 / 2 / 2 / 3;
  }
  .box-c {
    grid-area: 2 / 1 / 3 / 3;
  }
}


/* Snippet Styling */

.box-a {
  background: tomato;
}

.box-b {
  background: lightgreen;
}

.box-c {
  background: lightblue;
}

.grid-container>div {
  text-align: center;
  color: #fff;
  font-size: 3em;
  font-family: sans-serif;
  padding: 10%;
}

<div class="grid-container">
  <div class="box-a"> A </div>
  <div class="box-b"> <img src="http://placehold.it/100"> </div>
  <div class="box-c"> C </div>
</div>