Angular Конструкция материалов - изменение значения гибкости с размером экрана

Я новичок в AngularJS, поэтому, пожалуйста, потерпите меня. Я использую Angular Material Design, и у меня возникают трудности с поиском способа эффективного создания адаптивных сеток.

Пожалуйста, смотрите мои комментарии в коде ниже:

    <div layout="row">
<div layout="row" flex="75" layout-sm="column" class="ptn-info-grid" layout-margin> <!-- USING ROW FOR DESKTOP AND COLUMN FOR MOBILE DEVICES -->

    <div layout="column" flex="66"> <!-- I want this div occupy 2/3 of screen in Desktop but change to 100 in mobile devices (but stays in 66) -->


        <div layout="row" layout-sm="column">
            <div class="ptn-info-grid-item" flex>1</div>
            <div class="ptn-info-grid-item" flex>2</div>
        </div>

        <div layout="row" layout-sm="column">
            <div class="ptn-info-grid-item" flex>3</div>
            <div class="ptn-info-grid-item" flex>4</div>
        </div>

    </div>

    <div layout="column" flex="32"> <!-- I want this div occupy 1/3 of screen in Desktop but change to 100(which actually happens) in mobile devices. Im not using 33 because while using margin for child elements this div goes out of the parent div a little. -->
        <div class="ptn-info-grid-item" flex style="margin-left: 0px;">Right Long
        </div>
    </div>

</div>
<div layout="row" flex="25" id="customer-phone-img"></div>

Но изменение приведенных выше значений flex с "flex=66" и "flex=32" на просто flex и flex дает мне желаемый результат в мобильных устройствах, однако, как вы, наверное, знаете, в настольных ПК вместо отношения 2: 1, занимающего половину и половина.

Пожалуйста, смотрите также прикрепленные изображения.

Ожидаемое

_{(источник: sprintu.com)}

Как это

_{(источник: sprintu.com)}

Поэтому я ищу способ изменить значение гибкости для небольших экранов (для случая, когда применяется layout-sm - измените flex=66 на flex=100).

Ответ 1

Ознакомьтесь с разделом "Адаптивные атрибуты Flex и Offset Attributes" здесь: https://material.angularjs.org/#/layout/options

В принципе, вы можете использовать следующие параметры:

flex - устанавливает гибкость на всех.
flex-sm - Устанавливает гибкость на устройствах шириной менее 600 пикселей.
flex-gt-sm - Устанавливает гибкость на устройствах шириной более 600 пикселей.
flex-md - Устанавливает гибкость на устройствах шириной от 600 до 960 пикселей.
flex-gt-md - Устанавливает гибкость на устройствах шириной более 960 пикселей.
flex-lg - устанавливает гибкость на устройствах между 960px и 1200px.
flex-gt-lg - Устанавливает гибкость на устройствах шириной более 1200 пикселей.

Итак, измените ваше:

<div layout="column" flex="66">

<div layout="column" flex-gt-sm="66">

И этот div будет использовать только ширину 66, когда она больше, чем маленькая (мобильная)