Html Flexbox图像布局

我正在尝试创建一个flex box布局，这样当屏幕尺寸变小时，图像将彼此覆盖，如果屏幕尺寸变大，更多图像将出现在屏幕上。我想给

flex容器

一个

max width

可能会有用，但它没有。我将如何实现这一点？有什么有用的吗，谢谢

/*字体*/
@导入url(https://fonts.googleapis.com/css?family=Open+Sans:300400600）；
@导入url(https://use.fontawesome.com/releases/v5.0.8/css/all.css);
/*身体*/
身体{
字体系列：“开放式Sans”、Arial、Sans serif；
背景色：#fefe；
填充底部：3rem；}
/*侧面图*/
.个人资料图片{
显示器：flex；
边缘顶部：55px；
边缘底部：35px；
显示：内联块；
宽度：125px；
高度：125px；
边界半径：50%；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
背景色：#f1f1；}
.形象{
背景图像：url（'https://www.dropbox.com/s/8dtg60sbha99x2o/Photo%202018-02-05%2C%209%2026%2043%20AM.jpg？原始值=1’；}
/*配置文件名*/
.档案名称{
文本对齐：居中；
利润上限：-20px；
边缘底部：35px；
字体大小：粗体；}
/*用户名*/
.用户名{
文本对齐：居中；
利润上限：-30px；
边缘底部：35px；
颜色：rgba（1,1,1,0.35）；}
/*跟随按钮*/
.跟随按钮位置{
文本对齐：居中；
边缘底部：55px；
页边距顶部：-10px；}
.跟随按钮{
文本对齐：居中；
衬垫顶部：7.5px；
垫底：7.5px；
左侧填充：25px；
右边填充：25px；
边界半径：2px；
背景色：rgba（1,1,1,0）；
边框样式：实心；
边框颜色：#af985a；
边框宽度：1px；
颜色：#af985a；}
.跟随按钮：悬停{
游标：指针；}
/*职位*/
.柔性容器{
显示器：flex；
对齐内容：中心；}
img{
最大宽度：270px；
高度：自动；
填充：15px；}

科尔·格沃兹

科尔格沃兹

跟随

您可以尝试使用mediquerie

@media screen and (max-width: 39.9375em) {
.container {
  flex-direction: column;
}}

---

你可以把所有东西都放在一个容器里吗？

你可以试着放一个mediquerie

@media screen and (max-width: 39.9375em) {
.container {
  flex-direction: column;
}}

.flex-container {
    flex-wrap: wrap:
}

你可以把所有东西都放在一个容器里

.flex-container {
    flex-wrap: wrap:
}

我们将包装这些物品。如果您想要更多的控制，您可以使用媒体查询并设置flex子项的宽度。通常宽度：100%和最大宽度，以确保响应速度

我们将包装这些物品。如果您想要更多的控制，您可以使用媒体查询并设置flex子项的宽度。通常宽度：100%和最大宽度，以确保响应速度