Amp-List с Flex CSS и Amp-Mustache не работает - PullRequest
Новая
       26

Amp-List с Flex CSS и Amp-Mustache не работает

0 голосов
/ 03 июля 2018

Я совершенно не знаю, как применить flex css к списку усилителей. Я бы хотел, чтобы все дочерние элементы были равномерно распределены по горизонтали с промежутками между элементами.

При удалении поплавка: слева; от дочернего элемента я получаю только столбец, а не строки.

Кажется, что flex не применяется к детям.

Возможно ли это сделать? Если вы можете, я хотел бы помочь.

CSS: 

.container-flex {
    display:flex;
    flex-flow:row wrap;
    justify-content: space-around;
    display:-webkit-box;display:-ms-flexbox;display:flex;
    ms-flex-wrap:wrap;flex-wrap:wrap;
    -webkit-box-pack:justify;-ms-flex-pack:justify;
    justify-content:space-between 
}
.item-flex {
    float:left;
    min-width:200px;
    min-height:350px;
    flex-basis:auto;
    flex-grow:1
}
.mb2 { margin-bottom:2rem;}
.mx-auto{ margin-left:auto;margin-right:auto;}

AMP-LIST: 

<amp-list class="container-flex" [src]="json.src" src="json.src" height="2500" width="auto" layout="fixed-height">
    <template type="amp-mustache">
    <div class="item-flex left mb2 mx-auto">
        ...content...
    </div>
    </template>
</amp-list>

1 Ответ

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

Попробуйте изменить свой JSON. Соберите данные вашего гибкого элемента в одну группу на вашем ресурсе json Пример: 

{
  "items":[
      {
         "flex-item-group":[
             { "your-data": "value" },
             { "your-data-2" : "value 2" }
          ]
      }
  ]
}

Затем в html примените следующее: 

<amp-list class="container-flex" [src]="json.src" src="json.src" height="2500" width="auto" layout="fixed-height">
<template type="amp-mustache">
<div class="item-flex left mb2 mx-auto">
   {{#flex-item-group}}
    ...content...
   {{/flex-item-group}}
</div>
</template>

...