Question

新手灵活使用/网页开发。

我目前在灵活容器中有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项的顺序）而无需订购容器中的每一项都会产生令人讨厌的重复代码块？

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 */

Stack snippet

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

Answer 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;}

Answer 3

如果您只想切换这两个，您可以将它们包装在另一个Flex容器中，只需切换其中的排序。这样就不需要重新定义外部流程，并且可以将容器设置为在需要实现相同功能的其他区域中重复使用。

<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

Answer 4

除了TripWire的答案之外，您无需在第4天之后为每个 <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

Flex订购有干燥方式吗？

4 个答案: