如何让物化卡片在django中排成一列？

# Django视图函数
from django.shortcuts import render
from .models import MaterialCard

def material_card_view(request):
    material_cards = MaterialCard.objects.all()  # 假设MaterialCard是数据库中的模型类
    return render(request, 'material_card.html', {'material_cards': material_cards})

# material_card.html模板
{% for card in material_cards %}
    <div class="material-card">
        <h3>{{ card.title }}</h3>
        <p>{{ card.description }}</p>
        <!-- 其他卡片内容 -->
    </div>
{% endfor %}

<!-- CSS样式 -->
<style>
    .material-card {
        display: flex;
        flex-direction: column;
        /* 其他样式属性，例如： */
        margin-bottom: 10px;
        width: 300px;
        border: 1px solid #ccc;
        padding: 10px;
    }
</style>