使特定的 flexbox 响应

Question

对于我即将到期的学校项目，我正在创建一个网站，其中包含与该网站上的“'our work'”和“'follow along'”部分类似的部分：https://bellafare.com/

我在 flexbox 的帮助下重新创建了它们，它们在 15 英寸笔记本电脑屏幕和 iphone 6/7/8 上看起来就像我想要的那样。然而！在宽度 646 到 978 之间，布局看起来很糟糕，因为其中一个或多个图像最终位于该行下方。有没有办法用媒体查询来解决这个问题，让它像在 bellafare 网站上一样，div 的大小随着屏幕变小而变小，直到它在 iphone 上 6/7/8平台然后变成柱子？我尝试了几种选择，但我已经走到了死胡同。另外，如何让文字出现在图片上？

html:


<div class="classes">
        <div><a href="#">Beginner<img src="bella1.png"/></a></div>
        <div><a href="#">Intermediate<img src="bella2.png"/></a></div>
        <div><a href="#">Advanced<img src="bella3.png"/></a></div>
        </div>

和


 <section class="ig">
        <header>
            <h3><i>follow along <a href="XXX">@XXX</a></i></h3>
        </header>
        <div class="iglinks">
        <div><a href="#"><img src="ig1.png"/></a></div>
        <div><a href="#"><img src="ig2.png"/></a></div>
        <div><a href="#"><img src="ig3.png"/></a></div>
        <div><a href="#"><img src="ig4.png"/></a></div>
        <div><a href="#"><img src="ig5.png"/></a></div>
        <div><a href="#"><img src="ig6.png"/></a></div>
        </div>
    </section>

CSS:


.classes {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    width: 100%;
}

.ig {
    margin-top: 50px;
}

.iglinks {
    display: flex;
    margin: 0 auto;
    flex-flow: row wrap;
    justify-content: space-around;
}

如果能得到任何帮助，我将不胜感激。如果这是一个完全菜鸟的问题，我很抱歉，我的焦虑正在加剧，所以我想我会试一试。

Answer 1

使用 nowrap 修复你的 flex-flow

 .iglinks {
    flex-flow: row nowrap;
    }

并使您的图片响应：

@media (min-width: 646px) and (max-width:978px){
  .iglinks img {
    width: 100%;
    height: auto;
  }
}

您可能需要添加一些填充

使特定的 flexbox 响应

Making specific flexbox responsive

css

flexbox

responsive-design

responsive

flexboxgrid