css - 这种布局是否可以通过 flexbox 实现且没有媒体查询？

Question

我正在执行我的第一个“网页设计项目？”，我遇到了这个问题：

如果屏幕为 +922px，我希望文章（flex-items）填充尽可能多的宽度，但始终在主（flex-container）内形成两列布局。当屏幕小于 922px 时，我希望它们位于一列中。

是否可以使用 flexbox 执行此操作，或者我做出了错误的决定，我应该使用 grid/media queries/column-count: 2 来代替？

目前，当我稍微缩小页面时，如果不将它们显示为 1 列布局，我无法为文章提供合理的宽度。我希望项目根据浏览器长度缩小/增长一点。

顺便说一句，对不起我的英语。

.main {
    grid-column: 2/3;
    grid-row: 2/3;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
    .main__title {
        min-width: 100%;
        margin-bottom: 0;
    }
    
    .article {
        width: 500px;
    }

        .article__title {
            width: 100%;
        }

         .article__p {
            max-width: 75%;
            margin: 0px;
        } 
    
        .article__img {
            margin: 1em;
            width: 20%;
            float: left;
        }

整个代码在这里：https ://github.com/llfontbote/DAW-M9

标签： cssflexboxmedia-queries