Расположите элементы выше с помощью углового гибкого макета - PullRequest
Новая
       9

Расположите элементы выше с помощью углового гибкого макета

0 голосов
/ 27 января 2019

Я новичок в использовании Flex Layout для получения адаптивных экранов, мне трудно расположить 3 элемента над элементом, когда экран меньше 500 пикселей.

Левый элемент всегда выше 3 элементов насправа, и мне нужно поместить 3 элемента справа над элементом слева в следующей последовательности:

На данный момент я получаю следующий результат:

div Таблица

div Элемент 1

div Элемент 2

div Элемент 3

Мне нужен следующий результат:

div Элемент 1> Div Элемент 2> Div Элемент 3

div Таблица

enter image description here

Когда у меня на полном экранемне нужен результат, но когда он не на весь экран, мне нужно 3 элемента над таблицей.

В моем component.html: 

<div fxLayout="column" fxLayoutAlign="start" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start start">


    <div class="widget red" fxFlex="100">
        <h2>Table Content Here</h2>
        <h6>..................</h6>
        <h6>..................</h6>
        <h6>..................</h6>
    </div>

    <div class="widget green" fxFlex="100" fxFlex.gt-sm="20" flexOrder="1">

        <widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column">
            <div class="widget-front mat-elevation-z1">
                <div class="pl-16 pr-8 py-16 h-52 yellow" fxLayout="row" fxLayoutAlign="start start">
                </div>

                <div fxLayout="column" fxLayoutAlign="center center">
                    Content 1
                </div>
            </div>
        </widget>

        <widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column">
            <div class="widget-front mat-elevation-z1">
                <div class="pl-16 pr-8 py-16 h-52 blue" fxLayout="row" fxLayoutAlign="start start">
                </div>

                <div fxLayout="column" fxLayoutAlign="center center">
                    Content 2
                </div>
            </div>
        </widget>

        <widget [@animate]="{value:'*',params:{y:'100%'}}" class="widget" fxLayout="column">
            <div class="widget-front mat-elevation-z1">
                <div class="pl-16 pr-8 py-16 h-52 blue" fxLayout="row" fxLayoutAlign="start start">
                </div>

                <div fxLayout="column" fxLayoutAlign="center center">
                    Content 3
                </div>
            </div>
        </widget>
    </div>
</div>
...