Question

现在，该网站使用脚本移动到另一个块。我可以使用flexbox将元素从一个块移动到另一个块吗？

<div class="soc">
  <a href="#" class="social-icon">facebook</a> <br>
  <a href="#" class="social-icon">twitter</a>
</div>

<div class="info">
  lorem 123
</div>

if (window.innerWidth < 768) {
   $('.social-icon').appendTo('.info');
}

从移动元素加载时 - 在一个块中，从桌面加载 - 在另一个块中加载。我没有写这个例子的resize函数。

Answer 1

不，您不能在不同的块中移动项目。 flexbox order属性仅适用于同一个Flex容器的子项，例如：

<div class="soc">
  <a href="#" class="social-icon fb">facebook</a>
  <a href="#" class="social-icon tw">twitter</a>  
  <a href="#" class="social-icon ig">instagram</a>
</div>

您可以在其中为fb，tw和ig类分配订单，以更改其在DOM中的外观。

此外，您可以将flex-flow属性分配给flex容器（在您的情况下为soc类）到列/行-reverse以反转容器内的所有子项。

以下是完整的代码示例：

.soc {
  display: flex;
  flex-direction: column;
}

a {
  margin: 1rem;
}

.fb {
  order: 2;
}

.tw {
  order: 3;
}

.ig {
  order: 1;
}

<div class="soc">
  <a href="#" class="social-icon fb">facebook 2nd</a>
  <a href="#" class="social-icon tw">twitter 3rd</a>  
  <a href="#" class="social-icon ig">instagram 1st</a>
</div>

MDN reference on order

我可以使用flexbox将元素从一个块移动到另一个块吗？

1 个答案: