现在,该网站使用脚本移动到另一个块。我可以使用flexbox将元素从一个块移动到另一个块吗?
https://jsfiddle.net/Lxmo4stc/
<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函数。
答案 0 :(得分:0)
不,您不能在不同的块中移动项目。
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>