[英]Amp-List with Flex CSS and Amp-Mustache does not work
I'm totally at a loss as to how to apply the flex css to amp-list. 我对如何将flex css应用于amp-list完全不知所措。 I'd like all child items to be evenly spaced in the horizontal with spaces between the items.
我希望所有子项在水平方向上均等分布,各项之间要有间隔。
When I remove float:left; 当我删除float:left; from the child item, all I get is a column, not rows.
从子项中,我得到的只是一列,而不是行。
It seems that flex is not applied to the children. 似乎flex不适用于孩子。
Is it possible to do this? 是否有可能做到这一点? If you can, I'd love the help.
如果可以的话,我很乐意提供帮助。
CSS: 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>
Try to change your json. 尝试更改您的json。 Collect your flex item data in one group in your json resource.
将您的弹性商品数据收集到json资源中的一组中。 Example:
例:
{
"items":[
{
"flex-item-group":[
{ "your-data": "value" },
{ "your-data-2" : "value 2" }
]
}
]
}
Then on your html, apply this: 然后在您的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.