как выровнять элемент по центру с помощью углового изгиба - PullRequest
Новая
       8

как выровнять элемент по центру с помощью углового изгиба

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

Я пытаюсь создать приложение для угловых материалов, используя угловую гибкую компоновку, указанную в https://tburleson -layouts-demos.firebaseapp.com / # / docs , я пробовал различные комбинации, но ничего не работает для мне. Я пытаюсь построить несколько карт под панелью инструментов, которая должна занимать около 70% площади, выравнивание по центру, но в итоге они использовали все пространство. Мой HTML 

<!--The content below is only a placeholder and can be replaced.-->
<div fxLayout="column" fxLayoutAlign="space-around center" fxLayoutGap="20px">
<div fxLayout="row">
  <mat-toolbar color="primary">
    <span>Flex layout Example</span>
  </mat-toolbar>
</div>
<div fxLayout="row" fxFlex="66">
  <mat-card>
    <mat-card-header>Sample Card</mat-card-header>
  </mat-card>
</div>
</div>

Если я добавлю ширину: 66% в классе CSS, это работает, но почему я не могу сделать это только с помощью fxFlex?

Согласно предложению Ману. 

<!--The content below is only a placeholder and can be replaced.-->
<div fxLayout="column" fxLayoutAlign="space-around center" fxLayoutGap="20px">
<div fxLayout="row">
  <mat-toolbar color="primary">
    <span>Flex layout Example</span>
  </mat-toolbar>
</div>
<div fxLayout="row" fxFlex="66%" fxLayoutAlign="center center">
  <mat-card>
    <mat-card-header>Sample Card</mat-card-header>
  </mat-card>
</div>
</div>

тоже не работал

Ответы [ 2 ]

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

эта ссылка может быть полезной для вас; макеты-демки

редактировать; если ваше flex-направление - строка, вы можете отцентрировать его следующим образом (замените «none» на «center», если вы тоже хотите центрировать по вертикали). Проверьте ссылку для получения дополнительной информации о макете flex.

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

Вы пропустили% в fxFlex = "66%", а также выровнять по центру add fxLayoutAlign = "center center". Первый параметр в fxLayoutAlign предназначен для главной оси, а второй - для поперечной оси.

...