html - 如何设置水平 之间的空间以使其恢复 100% 的页面

Question

我有一个包含一些元素的列表(有时有 3 个/有时有 4 个或更多...)

我想做的是让它们自动调整以使用所有空间。

CSS 有办法吗？告诉他们“嘿

我要你使用 100% 的可用空间”？

其实很好，但我希望他们使用所有空间。

这就是我所拥有的:

这就是我想要的:

如果元素比较多，如果不改css代码，能自动调整就好了。

我试过使用 margin:auto 但它没有用。

任何形式的帮助将不胜感激

Answer 1

使用 flex 盒子。使用 justify-content 属性并将其设置为 space-between

学习 flexbox 的好方法是使用这些网站:

1. > http://flexboxfroggy.com/
2. > http://www.flexboxdefense.com/

li{
  height: 50px;
  width: 50px;
  border: 1px solid;
}

ul{
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>