Тот же самый размер последних элементов с Flex Layout в сетке - PullRequest
Новая
       22

Тот же самый размер последних элементов с Flex Layout в сетке

0 голосов
/ 04 октября 2018

У меня проблема с использованием системы сетки с разметкой флекс.

Допустим, у меня есть сетка из 6 элементов, и я хочу 4 элемента в строках.Поэтому я хотел бы сделать так: 

<div fxFlex="100" fxLayout="row wrap" fxLayoutGap="1px">
<div fxFlex="calc(25% - 1px)" fxLayoutAlign="center end" *ngFor="let item of items">
    <span fxFlex>{{ item }}</span>
</div>
</div>

Проблема с этим кодом заключается в том, что последние два элемента во втором ряду имеют размер, отличный от элементов в первом ряду.Они будут иметь размер 50% строки в натуральную величину, но элемент первой строки будет занимать 25% строки в натуральную величину.

Итак, как мне сделать так, чтобы все элементы имели 25%полноразмерный ряд на два ряда?

Ответы [ 2 ]

0 голосов
/ 04 октября 2018

Проблема с вашим кодом заключается в комбинации fxLayoutGap="1px" в родительском flex-контейнере и fxFlex="calc(25% - 1px)" в ваших flex-дочерних элементах.

Если вы просто удалите fxLayoutGap="1px" и измените свойдети до fxFlex="25" вы получите желаемое поведение. Однако это приведет к тому, что ваш разрыв будет удален.

Если вы действительно хотите сохранить свой разрыв, я предлагаю вам быть последовательным и использовать процент, как в следующем примере: Вот рабочий стек Blitz 

<div fxFlex="100" fxLayout="row wrap" fxLayoutGap=".2%">
      <div fxFlex="24" fxLayoutAlign="center end">
        <span style="background-color: green" fxFlex>1</span>
      </div>
      <div fxFlex="24" fxLayoutAlign="center end">
        <span style="background-color: yellow" fxFlex>2</span>
      </div>
      <div fxFlex="24" fxLayoutAlign="center end">
        <span style="background-color: blue" fxFlex>3</span>
      </div>
      <div fxFlex="24" fxLayoutAlign="center end">
        <span style="background-color: orange" fxFlex>4</span>
      </div>
      <div fxFlex="24" fxLayoutAlign="center end">
        <span style="background-color: pink" fxFlex>5</span>
      </div>
      <div fxFlex="24" fxLayoutAlign="center end">
        <span style="background-color: red" fxFlex>6</span>
      </div>
    </div>
0 голосов
/ 04 октября 2018

Ответ использует fxFlex="25" вместо fxFlex="calc(25% - 1px)" и удаляет fxLayoutGap и решите это, добавив, например, padding: 1px.

Я создал stackblitz , чтобы показатьэто возможное решение (ширина отступа: 3 пикселя): 

<div fxFlex="100" fxLayout="row wrap">
    <div fxFlex="25" fxLayoutAlign="center end" *ngFor="let item of items" style="padding: 3px;">
        <span fxFlex>{{ item }}</span>
    </div>
</div>

Если вы не хотите удалять fxLayoutGap, используйте fxFlex="24". 

<div fxFlex="100" fxLayout="row wrap" fxLayoutGap="1px">
    <div fxFlex="24" fxLayoutAlign="center end" *ngFor="let item of items">
        <span fxFlex>{{ item }}</span>
    </div>
</div>
...