是否有 DRY 的 Flex 订购方式？答案

【问题标题】：Is there a DRY way of Flex ordering?是否有 DRY 的 Flex 订购方式？
【发布时间】：2017-09-02 03:36:03
【问题描述】：

灵活使用/网络开发的新手。

我目前在移动设备的 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

目前，我实现这一目标的唯一方法是使用这个不吸引人的弹性订单 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 的顺序），而不必订购容器中的每一个项目，从而创建令人讨厌的重复代码块？

【问题讨论】：

标签： html css sorting flexbox

【解决方案1】：

您只需使用 2 个 CSS 选择器即可完成此操作，并且使用 order 默认为 0，我们将项目 3 和 5/6 重新定位，此处通过对屏幕宽度大于 600 像素的媒体查询完成，到 @987654323 @和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 */

堆栈sn-p

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

【讨论】：

太棒了！谢谢大家。

【解决方案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】：

如果您只想切换这两个，您可以将它们包装在另一个弹性容器中，然后简单地在其中切换排序。这样您的外部流程就不必重新定义，并且您可以设置容器以在需要实现相同目标的其他领域重复使用。

<div class="container">
  <div class="item one">One</div>
  <div class="item two">Two</div>
  <div class="item three">Three</div>
  <div class="switch">
    <div class="item four">Four</div>
    <div class="item five">Five</div>
  </div>
  <div class="item six">Six</div>
  <div class="item seven">Seven</div>
</div>


.item {
  flex: 1 0 100%;
  line-height: 39px;
  height: 40px;
  width: 100%;
  background: #cecece;
  margin-bottom: 10px;
  text-align: center;
}
.container {
  display: flex;
  flex-wrap: wrap;
}

.switch {
  display: flex;
  flex-wrap: wrap;
  flex: 1 0 100%;
}

@media (min-width: 400px) {
  .switch .item:nth-of-type(1) {
    order: 2;
  }
}

fiddle

【讨论】：

真的很喜欢这种方法。谢谢。
哈哈，我点了，可惜我的声望不到15！

【解决方案4】：

除了 TripWire 的回答之外，您无需为第四个之后的每个 <div> 设置一个不同的订单号。

.item:nth-of-type(3), .item:nth-of-type(4) ~ .item {order:100;}
.item:nth-of-type(4) {order:50;}

一支笔：https://codepen.io/israfel/pen/eEbWWG

【讨论】：