Как сделать flexbox в div, чтобы иметь 2 столбца с ngFor mat-Chips / angular material2?
У меня есть список фруктов с 10 записями. Я хочу сделать так, чтобы текст названия фруктов (рядом с матовой фишкой) отображался в двух столбцах по 5 в каждом столбце. Чипы, которые я использую, находятся здесь: https://material.angular.io/components/chips/api
Мой CSS:
.flexp {
display: flex;
flex-wrap:wrap;
}
.flexc {
flex-grow: 1;
display: inline-block;
}
HTML
<div class = "flexp" *ngFor = "let fruit of fruits">
<div class = "flexc">
<mat-chip>
{{fruit.typeOfFruit}}
</mat-chip>
{{fruit.name}}
</div>
</div>
Как я могу это сделать? Прямо сейчас мой флексбокс движется сверху вниз.
Я хочу сделать так, чтобы он выглядел как таблица, но без создания структуры. Если бы у ngFor был способ быть достаточно умным, чтобы отображать его таким образом ... вот что я ищу:
<table>
<tr>
<td>Fruit 1</td><td>Fruit 6</td>
<td>Fruit 2</td><td>Fruit 7</td>
<td>Fruit 3</td><td>Fruit 8</td>
<td>Fruit 4</td><td>Fruit 9</td>
<td>Fruit 5</td><td>Fruit 10</td></tr>
</table>
Если это невозможно, просьба указать.
Я не понимаю, что вы имеете в виду, я хочу, чтобы он выглядел как таблица без кодирования таблицы.
flexbox должен заставить несколько дочерних элементов одного гибкого родителя следовать некоторым правилам выравнивания и распределения. Вместо 12 детей внутри одного родителя у вас будет 12 родителей, у каждого по 1 ребенку. Вы либо применяете flex к родителю родителей, либо применяете свой *ngFor к .flexc. Я бы лично выбросил .flexc (если вы его кодировали только для этого случая) и просто повторил бы <mat-chip>s.
Итак, проблема с моим вопросом - это мат-чип, который я хочу отображать рядом с fruit.name ... при установке * ngFor на мат-чипе это выглядит забавно
Я считаю, что style = "display: inline-block;" заменяет display: flex; в .flexp. Итак, вы думаете, что используете flexbox, но это не так.
Можете показать, как это должно работать?
В вашем примере таблицы отображается только одна строка с 10 столбцами ... это не совсем то, что вам нужно, не так ли?
Ответы 5
Я предполагаю, что приведенный вами в качестве примера код таблицы неверен, поскольку вы упомянули, что вам нужны 2 столбца с 5 строками, что эквивалентно этому. В приведенном ниже ответе должен отображаться экран, аналогичный приведенному в таблице.
<table>
<tr><td>Fruit 1</td><td>Fruit 6</td></tr>
<tr><td>Fruit 2</td><td>Fruit 7</td></tr>
<tr><td>Fruit 3</td><td>Fruit 8</td></tr>
<tr><td>Fruit 4</td><td>Fruit 9</td></tr>
<tr><td>Fruit 5</td><td>Fruit 10</td></tr>
</table>
Если вы хотите использовать flex, вам нужно установить flow-direction на column и установить максимальную высоту контейнера, равную 5-кратной высоте строка.
scss
$rowHeight: 40px;
.flexp {
display: flex;
flex-wrap:wrap;
flex-direction: column;
max-height: calc(5 * #{$rowHeight});
}
.flexc {
height: $rowHeight;
flex-grow: 1;
display: inline-block;
}
html
<mat-chip-list>
<div class = "flexp">
<div class = "flexc" *ngFor = "let fruit of fruits">
<mat-chip>
{{fruit.typeOfFruit}}
</mat-chip>
{{fruit.name}}
</div>
</div>
</mat-chip-list>
Другое решение, не использующее гибкость
Вы можете использовать свойство счетчик столбцов
scss
$rowHeight: 40px;
.fruitContainer {
column-count: 2;
max-height: calc(5 * #{$rowHeight});
}
.fruit {
height: $rowHeight;
}
html
<mat-chip-list>
<div class = "fruitContainer">
<div class = "fruit" *ngFor = "let fruit of fruits">
<mat-chip>
{{fruit.typeOfFruit}}
</mat-chip>
{{fruit.name}}
</div>
</div>
</mat-chip-list>
Ниже результат
Мне нравится настоящий флексбокс и детализация этого решения.
Вы можете использовать CSS columns для определения адаптивных макетов столбцов в содержащем элементе. Например...
#container {
-webkit-columns: 2 200px;
-moz-columns: 2 200px;
columns: 2 200px;
}
Первое значение (2) объявляет количество столбцов, а второе значение (200 пикселей) объявляет их минимальную ширину, так что браузер свернет столбцы, если контейнер недостаточно широк. Префикс производителя может быть не обязательно строго необходимым, но все же рекомендуется.
См. Этот пост CSS-хитрости, который также касается желобов столбцов и т. д., Для получения дополнительной информации.
:)
MatGridList предоставляется именно по этой причине.
<mat-grid-list cols = "2" rowHeight = "48px">
<mat-grid-tile *ngFor = "let fruit of fruits">
<div class = "flexc">
<mat-chip>
{{fruit.typeOfFruit}}
</mat-chip>
{{fruit.name}}
</div>
</mat-grid-tile>
</mat-grid-list>
См. пример stackblitz.
Мне нравится простота этого решения.
Изменение вашего CSS на это приведет к тому, что вы обернете его по своему усмотрению, но не в таком порядке. Направление ltr.
.flexp {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.flexc {
width: 50%;
}
Вы можете попробовать и так ..
CSS
.flexp {
column-count: 2;
column-gap: 200px;
width: 300px;
}
.flexc {
display: inline-block;
width: 160px;
text-align: left;
border: 1px solid white;
}
HTML:
<div class = "flexp">
<div class = "flexc" *ngFor = "let fruit of fruits">
<mat-chip>
{{fruit}}
</mat-chip>
</div>
</div>
Предположим, один из ваших клиентов повторяет строку 12 раз. И каждая строка содержит 1 столбец. И каждый столбец содержит элемент, который они действительно хотят повторить. Что бы вы сказали своему клиенту?