大佬教程收集整理的这篇文章主要介绍了css3 – 滚动弹性容器不适合居中的项目,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<div id="container"> <div class="item">Foo</div> <div class="item">Bar</div> </div>
CSS:
#container { display: flex; justify-content: center; overflow: auto; } .item { flex-grow: 1; min-width: 200px; max-width: 300px; }
当上述容器缩小到小于400px时,会出现预期的水平滚动条.但是,即使向左滚动,第一个项目也会被容器的左边缘部分遮挡.随着容器缩小,更多的物品被遮挡.
演示:http://jsfiddle.net/FTKcQ/.调整结果框的大小以进行观察.在Chrome 30和Firefox 24中测试过.
如果将justify-content从中心更改为任何其他值(例如,间隔),则通过滚动可以看到所有内容.为什么居中的项目表现不同?
这里的目标是有一排居中的项目,每个项目的宽度将在某个范围之间增长.如果容器无法容纳所有最小宽度的项目,则应滚动以显示所有项目.
因此,您可以使用边距进行对齐来实现预期结果.只需添加margin-left:auto作为第一项,margin-right:auto作为last.
以上是大佬教程为你收集整理的css3 – 滚动弹性容器不适合居中的项目全部内容,希望文章能够帮你解决css3 – 滚动弹性容器不适合居中的项目所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。