html - 是否有 DRY 的 Flex 订购方式？

Question

flex 使用/网络开发新手。

我目前在为移动设备订购的 flex 容器中有 6 个盒子: Mobile view

代码或多或少像这样(不包括 CSS，但类“box”是您在上面看到的灰色框):

<div class="flex-container">
    <div class=“box item” />
    <div class=“text item”>
        <h4>Text</h4>
    </div>
    <div class=“box item” />
    <div class=“text item”>
        <h4>Text</h4>
    </div>
    <div class=“box item” />
    <div class=“text item”>
        <h4>Text</h4>
    </div>
</div> 

这就是我想要的移动设备!

但是对于桌面，我想实现这个:Desktop View

目前，我实现这一目标的唯一方法是使用这个没有吸引力的 flex order css:

item:nth-of-type(1) {order:1;}
item:nth-of-type(2) {order:2;}
item:nth-of-type(3) {order:4;}
item:nth-of-type(4) {order:3;}
item:nth-of-type(5) {order:5;}
item:nth-of-type(6) {order:6;}

我的问题是，有没有一种方法可以实现我想要的目标(即调换第 3 项和第 4 项的顺序)，而不必对容器中的每一项都进行排序，从而创建令人厌恶的重复代码块？

Answer 1

您只需使用 2 个 CSS 选择器即可完成此操作，并且 order 默认为 0，我们重新定位元素 3 和 5/6，此处使用媒体完成查询宽度大于 600px 的屏幕，为 1 和 2。

.item:nth-of-type(3)   { order:1; }               /*  put 3 after 4   */
.item:nth-of-type(n+5) { order:2; }               /*  put 5,6 after 3 */

堆栈片段

.flex-container { display: flex; flex-wrap: wrap; }
.item           { height: 50px; flex-basis: 100%; }
.box            { background: lightgray; }

@media (min-width: 600px) {
  .item                  { flex-basis: 50%; }
  .item:nth-of-type(3)   { order:1; }               /*  put 3 after 4   */
  .item:nth-of-type(n+5) { order:2; }               /*  put 5,6 after 3 */
}

<div class="flex-container">
  <div class="box item"></div>
  <div class="text item">
    <h4>Text</h4>
  </div>
  <div class="box item"></div>
  <div class="text item">
    <h4>Text</h4>
  </div>
  <div class="box item"></div>
  <div class="text item">
    <h4>Text</h4>
  </div>
</div>