Sass flex order ничего не делает сгенерированными элементами - PullRequest
Новая
       17

Sass flex order ничего не делает сгенерированными элементами

0 голосов
/ 30 ноября 2018

У меня есть пара 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 был первым в порядке (строка).Поэтому я подумал, что я использую строку и просто установил className на SVG

, так что вот 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 длятот, который должен быть первым, но все они остаются в том же порядке.Кто-нибудь знает, почему это происходит.

1 Ответ

0 голосов
/ 30 ноября 2018

Атрибут порядка работает только в том случае, если для элемента отца используется display: flex

Если предположить, что .menu-tab - это деление отца для этих элементов .menu-close-button, .menu-leaderboard-button, .menu-prize-button, .menu-rules-button, вам просто нужно установить *От 1008 * до .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>
...