Question

我有几个这样的SVG渲染

export const MenuHeaderTab = (props: RenderableProps<Props>) => 
{
    const css = props.isActive ? "menu-tab menu-tab-selected" : "menu-tab";

    return (
        <div onClick={() => props.onClick()} className={css}>
            {props.children}
        </div>
    )
}

我的问题是，在桌面模式下它可以正常工作，因为它们以我希望它们的顺序进行渲染。问题是在移动人像模式下，我希望渲染的SVG之一按顺序（行）排在第一位。所以我以为我用row并在SVG上设置className

所以这是sass / css

@media all and (orientation: portrait)
{
    .menu-tab {
        width: 10%;
        height: 20%;
        margin-left: 4vw;
    }
    .menu-close-button {
        order: -1;
    }
    .menu-leaderboard-button {
        order: 2;
    }
    .menu-prize-button {
        order: 3;
    }
    .menu-rules-button {
        order: 4;
    }

因此，我什至给所有SVG和-1都提供了应首先提供的命令，但它们仍然保持完全相同的顺序。任何人都知道为什么会发生这种情况。

Answer 1

Order属性仅在父元素使用display: flex

时有效

假设.menu-tab是该元素.menu-close-button, .menu-leaderboard-button, .menu-prize-button, .menu-rules-button的父级，则只需将display: flex设置为.menu-tab

请遵循以下代码示例： 看关闭按钮，它是最后一个元素，但如何将-1设置为顺序，它成为第一个元素

.menu-tab {
	width: 10%;
	height: 20%;
	margin-left: 4vw;
	display: flex;
}
.menu-tab a{
	margin-right: 10px;
}

.menu-close-button {
	order: -1;
}
.menu-leaderboard-button {
	order: 2;
}
.menu-prize-button {
	order: 3;
}
.menu-rules-button {
	order: 4;
}

<div class="menu-tab">
		<a href="#" class="menu-leaderboard-button">leaderboard</a>
		<a href="#" class="menu-prize-button">Prize</a>
		<a href="#" class="menu-rules-button">Rules</a>
		<a href="" class="menu-close-button">Close</a>
</div>

Sass Flex顺序对生成的元素不起作用

1 个答案: