vue.js - 以网格模式显示组件。Vue.js
问题描述
我有一个卡片组件,我想在行和列中显示,我无法弄清楚,如果可能的话,我想在不使用任何依赖项的情况下做到这一点。我想要一个简单的网格,比如每行 4 或 5 个,并在必要时添加一个新行。
这些组件用于显示用户创建的类别,数量会发生变化,因为在此页面上用户可以创建更多、更新或删除类别。
现在我只是像这样显示它们,但它们都只是一个在另一个之上
<div v-for="(category, index) in categories" :key="index">
<category_component :category="category" v-on:delete="confirmDelete" v-on:edit="editItem"/>
</div>
有没有一种简单的方法可以动态地在每行显示一定数量?
编辑:我按照这样的建议添加了一些 flex 参数
<div class="category-container">
<div v-for="(category, index) in categories" :key="index">
<category_component :category="category"
v-on:delete="confirmDelete" v-on:edit="editItem"/>
</div>
</div>
.category-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
现在它按行显示,但有没有办法限制每行的数量?它显示 6,但它们确实被推到一起,然后它们下面的行相距甚远。忽略新按钮。
解决方案
推荐阅读
- c++ - 如何在 CPU 上计算矢量变换?
- python - 为内部为白色,外部为黑色的多边形创建图像
- javascript - 当我运行项目时,我使用本机警告:ViewPager Android 已从 react-native 中提取?
- database - 如何将 MIT App Inventor 中的联系人导入数据库(tinydb 或 firebase)?
- python - 为没有写入权限的用户在网络驱动器上安装 Python
- python - 将列表项附加到字典,Python
- python - 为什么 TensorBoard 显示错误的余弦距离?
- java - 在switch语句的情况下如何使用&&运算符?
- python - Python,Keras - 二进制文本分类器预测结果为值数组而不是单个概率
- r - predict.glm 在返回 NULL 的有效模型上