angular 响应式设计 - 当屏幕小于某个宽度时添加换行符

Question

这是我更改屏幕宽度时的当前设计：

html:

<footer class='footer'>
    <div *ngFor='let item of items'>
        <h3 class='footer-item'>{{item.Description}}</h3>
    </div>
</footer>

css:

.footer {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
}

.footer-item {
    margin: 15px;
}

我正在寻找一种在屏幕变小时添加换行符的方法，这样项目就会换行，而不仅仅是溢出。

Answer 1

您可以使用 CSS flex wrap 属性将项目换行到下一行

.footer {
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

angular responsive design - add line breaker when the screen is smaller than some width