ionic栅格布局如何换行?

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

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

阅读 17.8k
4 个回答

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

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

<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

可以插入一个clearfix做换行

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进