本文主要是介绍如何解决弹性布局flex-wrap换行之后不想要最后一行自动分配剩余空间,让元素从左往右开始排列?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
这个问题的表述其实就反应了我们对弹性布局某些属性的理解不充分,混用,乱用。哈哈,没关系,我就是要问这样错误的问题,因为太多人跟我一样会问这样错误的问题。
那么现在我们来解决吧。
错误效果展示:
这是相应css代码:
.topicWrap {width: 100%;overflow: hidden;display: flex;justify-content: space-between;flex-wrap: wrap;
}
.topicItem {width: 4.375rem;height: 1.875rem;text-align: center;line-height: 1.875rem;background: rgba(255, 255, 255, 1);border: 1px solid rgba(32, 119, 184, 1);border-radius: 15px;font-size: 14px;color: rgba(32, 119, 184, 1);margin: 0.3125rem 0.625rem;
}
我想要的效果是这样的:
.topicWrap {width: 100%;overflow: hidden;display: flex;/* justify-content: space-between; */ /* 删除子级在父级主轴上的对齐方式这一属性,直接用弹性换行就ok了 */flex-wrap: wrap;
}
.topicItem {width: 4.375rem;height: 1.875rem;text-align: center;line-height: 1.875rem;background: rgba(255, 255, 255, 1);border: 1px solid rgba(32, 119, 184, 1);border-radius: 15px;font-size: 14px;color: rgba(32, 119, 184, 1);margin: 0.3125rem 0.625rem;
}
大家看出区别了吗?
总结方法:大部分新手程序员在使用弹性布局的时候因惯性思维,display:flex;之后都会使用justify-content: space-between;配合设置子级对齐方式。这样往往会遇到要子级元素最后一排排列出现问题。所以这时就不要设置justify-content属性了,直接使用弹性换行flex-wrap:wrap,再给子元素设置margin-left,也可以达到效果想要的效果哦。当然具体问题具体考虑。在明确子元素个数的时候,直接用:nth-child(n)利用奇数偶数来选择元素单独设置一下也是?的。
心得:这是一个简单傻逼的问题,来源于没有真正研究弹性布局属性的新手问题。哎,其实研究了也不怎么样,曾经专门学习了弹性布局,但是实际开发过程中也用不到那么多属性,常用的也就那几个,多多总结问题,能够越来越顺利地开发,我觉得对于初级程序员来说就够了。
这篇关于如何解决弹性布局flex-wrap换行之后不想要最后一行自动分配剩余空间,让元素从左往右开始排列?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!