ul {
display: flex;
flex-wrap: wrap;
width: 45%;
height: 40%;
border: 1px solid red;
list-style: none;
margin: 0 auto;
}
ul li {
flex: 1;
}
根据实际输出,检查ul元素上有左边距,如下所示,
检查li元素上还有右边距,如下所示
1)为什么存在这些边际空间？
2)如何避免这些边际空间？
左侧的空白是由默认填充引起的ul.删除它:
ul { padding-left: 0; }
请注意,某些浏览器可能会使用margin而不是padding此缩进.
右边的空白是由flex-wrap属性引起的.当flex项目换行时,容器不会重新计算其宽度以收缩包装新布局.
通过水平调整窗口大小,您将在此演示中看到正确的间距.
以下是一些更多详细信息和可能的解决方法:
在容器包装时使容器缩小到适合的子元素
如何使Flex容器居中但左对齐flex项目
京公网安备 11010802040832号 | 京ICP备19059560号-6 