响应式 flexbox 和重新排序子项

Question

我需要一些有关响应式 html 的帮助。

我有一个 flexbox 布局，有两列。每列包含两个不同高度的 div。

在移动设备上，我将 flex-direction 设置为列，因此它分为一列：

但是您可能已经猜到了，我希望顺序是 ABCD。我意识到我目前的设置可能无法做到这一点，因为 AFAIK 你不能订购 sub-children。但是我有什么选择可以得到想要的结果？

我可以用 javascript 重新安排事情，但如果可能的话，我更喜欢纯粹的 CSS 方法。

这能实现吗？我需要 CSS 网格才能执行此操作吗？

我添加了一个片段来说明这个问题。同样在代码笔上：https://codepen.io/Mudloop/pen/PowrKPV

（为简单起见，它没有媒体查询，只是两次相同的 html 和不同的 class）。

* { box-sizing: border-box; }
body { background-color: #444; color: white; font-family: sans-serif; max-width:650px; }

.normal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 20px;
}
.normal > div {
  color: white;
  width: calc(50%);
}
.normal > div > div {
  background-color: #333;
  padding: 10px;
  margin: 10px;
}


.mobile {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  margin:20px;
}

.mobile > div {
  color: white;
  width: 100%;
}
.mobile > div > div {
  background-color: #333;
  padding: 10px;
  margin: 10px;
}

<body>
  Desktop
  <div class="normal">
    <div>
      <div>A<br></div>
      <div>C<br><br><br><br><br></div>
    </div>
    <div>
      <div>B<br><br></div>
      <div>D<br><br><br></div>
    </div>
  </div>

  Mobile
  <div class="mobile">
    <div>
      <div>A<br></div>
      <div>C<br><br><br><br><br></div>
    </div>
    <div>
      <div>B<br><br></div>
      <div>D<br><br><br></div>
    </div>
  </div>
</body>

Answer 1

是的，您可以使用 order 属性在容器内的子项上使用 display: flex，结合媒体查询，而不使用网格来做到这一点。我不确定 HTML 结构对您的布局有何限制，因此我对其进行了一些改动。

我为 "desktop" 布局使用了最大高度来强制弹性项目用列流包裹。然后，当媒体查询被触发时（您可以将其设置为您支持的任何移动设备尺寸），最大高度将被删除，并且其中的项目可以根据 order 属性你指定。

您可以将其放入 codepen 中，使用 window 大小，它应该可以工作。

<body>
  Desktop
  <div class="normal">
      <div id="a">A<br></div>
      <div id="c">C<br><br><br><br><br></div>
      <div id="b">B<br><br></div>
      <div id="d">D<br><br><br>
    </div>
  </div>

* { box-sizing: border-box; }
body { background-color: #444; color: white; font-family: sans-serif;  }

.normal {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 20px;
  max-height: 200px;
}
.normal > div {
  color: white;
  width: calc(50%);
}
.normal > div {
  background-color: #333;
  padding: 10px;
  margin: 10px;
}

@media (max-width: 500px) {

  .normal {
    display: flex;
    flex-direction: column;
    flex-wrap: none;
    align-items: center;
    max-height: none;
  }

  #a {
    order: 1
  }

  #b {
    order: 2
  }

  #c {
    order: 3
  }

  #d {
    order: 4
  }

}

Answer 2

您可以使用 multi-column 桌面布局。
并在移动设备上使用媒体查询切换到 flex（允许重新 order 元素）。

运行下面的示例在 Full page 模式下尝试调整大小 window:
（我在块中添加了一些文字，使它们更真实）

* {
  box-sizing: border-box;
}

body {
  background-color: #444;
  color: white;
  font-family: sans-serif;
  max-width: 1280px;
  width: 100%
}

.normal {
  padding: 10px;
  border: solid 1px #ccc;
  margin: 20px;
  columns: 2 200px;
  column-fill: balance;
}

.normal>div {
  margin: 0 0 10px;
  padding: 10px;
  background-color: #333;
  page-break-inside: avoid;
}

@media (max-width:480px) {
  .normal {
    display: flex;
    flex-direction: column
  }
  .normal>div:nth-child(1) {
    order: 1
  }
  .normal>div:nth-child(2) {
    order: 3
  }
  .normal>div:nth-child(3) {
    order: 2
  }
  .normal>div:nth-child(4) {
    order: 4
  }
}

Desktop
<div class="normal">
  <div>A<br>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</div>
  <div>C<br>The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful
    when the focus is meant to be on design, not content.</div>
  <div>B<br>It usually begins with:<br>“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.”</div>
  <div>D<br> The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</div>
</div>

响应式 flexbox 和重新排序子项

Responsive flexbox and reordering subchildren

html

css

flexbox

responsive