小编Mar*_*uki的帖子

CSS 墙自下而上

我正在尝试仅使用 CSS 创建墙壁图案。这堵墙应该像现实生活中的墙一样自下而上生长。多亏了 Flex，我才做到了这一点。我现在正在尝试以不均匀的方式排列 div，使其更加真实。像这样（我知道有 JavaScript 解决方案，但是我是否可以只使用 CSS 来实现这一点？

body {
  display: flex;
  min-height: 100%;
  background: #f8f8f8;
}

html {
  min-height: 100%;
}

.flex-container {
  padding: 0;
  width: 100%;
  height: auto;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: flex-start;
  /*display: grid;
  grid-gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));*/
}

.wrap-reverse {
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}

.flex-item {
  background: blue;
  padding: 5px;
  width: 100px;
  height: 30px;
  margin: 10px;
  line-height: 30px;
  color: white;
  font-weight: bold;
  font-size: 1em;
  text-align: center;
}

Run Code Online (Sandbox Code Playgroud)