CSS中的宽度自动横向排列是指将一组元素按照自适应宽度进行排列,常用于轮播图、导航栏等场景。
实现方式是通过设置父容器的display属性为flex,子元素的宽度为百分比或flex-basis属性,再加上white-space: nowrap属性防止子元素换行。
.parent { display: flex; white-space: nowrap; } .child { flex-basis: 20%; /* 或width: 20% */ }
以上代码将父容器的子元素按照20%的宽度进行排列,并设置子元素不换行。如果子元素数目超过一行,可以设置父容器的overflow-x属性为scroll,实现横向滚动。
.parent { display: flex; white-space: nowrap; overflow-x: scroll; } .child { flex-basis: 20%; /* 或width: 20% */ }
这样就可以实现自适应宽度横向排列了。需要注意的是,在使用flex布局时,子元素的宽度不再是兼容性较好的box-sizing: border-box,而是默认为box-sizing: content-box,如果需要设置box-sizing,需要在子元素上单独设置。
另外,如果子元素需要加上边框或padding,需要根据盒模型原理进行计算,不然会影响到布局。