ionic栅格布局如何换行？

Question

<div class="row">
    <div class="col col-20" ng-repeat="image in images">
        <img src={{image}} class='img-responsive' />
    </div>
</div>

images是一个图片URL数组
如何实现每行最多5个图片 之后换行 如此循环呢？

Answer 1

我刚才研究了一下ionic 的css，发现它的布局使用的是flex系统，而非inline-block

所以你可以在row的css 里面加上 flex-flow: row wrap; 来让它换行，而不是挤在一起显示

Answer 2

推荐一个网络课程给你。http://www.hubwiz.com/course/5507ca5be564e51314f544e4/

Answer 3

<div class="row row-wrap">
    <div class="col col-20" ng-repeat="image in images">
        <img src={{image}} class='img-responsive' />
    </div>
</div>

加上row-wrap

Answer 4

可以插入一个clearfix做换行