Макет Angular Flex: отзывчивый макет, сочетающий строку и столбец
Я изучаю гибкий макет, и я пытаюсь создать отзывчивый пользовательский интерфейс. У меня есть многолетний опыт работы с сеточной системой начальной загрузки, но я не могу понять, как добиться следующего (живая демонстрация):
На мобильном телефоне:
Если я правильно понимаю, мне нужно использовать комбинацию rows и columns, как в приведенном ниже коде.
<div class = "container" fxLayout = "row" fxLayout.xs = "column" fxLayoutWrap fxLayoutGap = "0.5%" fxLayoutAlign = "center">
<div fxFlex = "25%"> ..code left out..</div>
<div fxFlex = "25%"> ..code left out..</div>
<div fxFlex = "25%"> ..code left out..</div>
<div fxFlex = "25%"> ..code left out..</div>
</div>
На маленьком экране макет меняется с row на column, что означает, что я реализовал приведенные выше примеры пользовательского интерфейса для больших и мобильных мониторов.
Вопрос: Как я могу реализовать пользовательский интерфейс для средних мониторов (см. Рисунок выше)? Не могу понять, как совместить row и column
Ответы 2
Вы можете попробовать так:
.container { // for desktop & tablet
display: flex;
flex-flow: row wrap;
}
.container div {
width: 25%
}
@media for middle { // for tablet (mid)
.container div {
width: 50%
}
}
@media for mobile { //for mobile
.container {
flex-direction: column;
}
.container div {
width: 100%
}
}
Надеюсь, это поможет, извините за не очень подробную информацию, но это просто быстрый совет с гибкостью.
Спасибо
Я бы минимизировал ваш код, перебирая массив элементов. И я изменил переход с md на sm вместо перехода прямо к xs, но это ваше предпочтение. Также вычитаю пробел в верстке (-0,5%).
<div class = "container" fxLayout = "row" fxLayout.sm = "column" fxLayoutWrap fxLayoutGap = "0.5%" fxLayoutAlign = "center">
<ng-container *ngFor = "let item of items">
<li
fxFlex = "0 1 calc(25% - 0.5%)"
fxFlex.lt-md = "0 1 calc(50% - 0.5%)"
fxFlex.lt-sm = "100%">
</li>
</ng-container>
</div>
Привет, большое спасибо. Как я могу просто заполнить подэлементы, используя ту же структуру? как нижний край: 5 пикселей?