如何解决Flexbox调整内容空间
我正在使用弹性框为我的产品列表进行布局,但是当我尝试将正当内容设置为间隔时,它在4种情况下效果很好,但是对于较少的项(2或3),它们会增长,所以无论行中有多少项目,我如何将项目之间的间隔设置为相同?
gcloud functions deploy ocr-extract --runtime python37 --trigger-bucket etdimage --entry-point process_image --set-env-vars "TRANSLATE_TOPIC=extractData,TO_LANG=en”
解决方法
更改为:
justify-content: center;
并添加间隙属性:
gap: 10px;
和差距。
,justify-content: space-between;
将元素之间的剩余容器空间分成相等宽度的块,您无法设置间距。
我建议尝试grid layout进行这种卡放置。
应该执行以下操作:
.productsContainer {
background-color: $color_1;
display: grid;
grid-template-columns: repeat(4,1fr);
grid-template-rows: auto;
grid-gap: 15px;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。