如何解决Flexbox包装不适用于我的4张图像
您好,我不确定为什么,但是由于某些原因,flexbox无法正常工作。 我在一个部分上有4张图片。我在容器上添加了flexbox换行,并且还分配了flex 1 在子图像上,但由于某种原因flexbox无法正常工作。
如果有人可以帮助我,让我知道我在做错什么,我将不胜感激。
https://codepen.io/rubenjr005/pen/rNexOZp?editors=0100
HTML代码
<div id="capabilities" class="bg-dark-02 py-2 angle-top-bottom-right">
<div class="capabilities-title">
<h4 class="section-title text-center">CAPABILITIES</h4>
<h3 class="lead text-center">I DO THINGS LIKE</h3>
</div>
<div class="capabilities-container">
<div class="category">
<div class="content">
<img src="img/graphic-design-icon_03.png" alt="Graphic Design" />
<div class="text-animation">
<h3 class="text-center">GRAPHIC DESIGN</h3>
</div>
</div>
</div>
<div class="category">
<div class="content">
<img src="img/Web-Design-icon_01.jpg" alt="Web Design" />
<div class="text-animation">
<h3 class="text-center">Web Design</h3>
</div>
</div>
</div>
<div class="category">
<div class="content">
<img src="img/web-development-01.png" alt="web Development" />
<div class="text-animation">
<h3 class="text-center">Web Development</h3>
</div>
</div>
</div>
<div class="category category4">
<div class="content">
<img src="img/email-development.png" alt="Email Development" />
<div class="text-animation">
<h3 class="text-center">Email Development</h3>
</div>
</div>
</div>
</div>
</div>
SCSS
#capabilities {
height: 100%;
margin-bottom: 4.5rem;
.capabilities-container {
display: flex;
flex-wrap: wrap;
// min-width: 20%;
.category {
display: flex;
// flex-direction: column;
flex: 1;
padding: 1rem;
align-items: center;
justify-content: center;
min-width: 10rem;
// width: 10rem;
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
img {
position: absolute;
top: 30%;
height: 12rem;
width: auto;
display: block;
// margin: auto;
margin-bottom: 4rem;
opacity: 0.4;
transition: 0.75s;
// padding-bottom: 4rem;
}
.text-animation {
// position: absolute;
text-align: center;
padding-top: 15rem;
transition-duration: 0.75s;
text-align: center;
left: 0;
right: 0;
// background: red;
// margin: auto;
h3 {
color: white;
text-transform: uppercase;
// margin: auto;
}
}
}
}
.category:hover .content img {
opacity: 1;
margin-bottom: 1rem;
// padding-bottom: 0rem;
// padding-bottom: 0rem;
}
.category:hover .content .text-animation {
// opacity: 1.0;
padding-top: 10rem;
}
}
}
解决方法
您必须摆脱 img 上的绝对定位,并且必须使用媒体查询。
从那里开始,您会看到flex-wrap: wrap
正常工作。
这是叉子:https://codepen.io/hisato/pen/vYGLLNY?editors=0100
此外,如果我可以补充一点,作为一般性建议,请避免过渡margin/padding/top/left
等。您应该始终寻找一种过渡transform
属性的方法,它将具有最佳性能。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。