如何实现自适应的网格布局?

Question

如下布局规则

1. .line-block(小蓝块) 数量、宽高不定
2. .container(容器) 宽高不定
3. .line-block 在行中左对齐，整体中左侧起始对齐
4. .cantainer中以行为单位中间对齐
5. .cantainer中竖直方向为顶部对齐，不等分空间

flex和grid的布局不是很熟，试着用，却总是满足了部分，未能真正满足，请教下各位大佬

Answer 1

外层设置一个padding，里面用flex自动填满就可以了

Answer 2

<div class="container">
  <div class="flex">
    <div class="line-block"></div>
    <div class="line-block"></div>
  </div>
</div>

.container {
  width: 400px;
  height: 400px;
  background-color: gray;
}
.flex {
  display: flex;
  flex-wrap: wrap;
}

.line-block {
 margin: 10px;
 width: 30px;
 height: 30px;
 background-color: blue;
}

效果：

Answer 3

大佬，解决了吗。俺也遇到这个问题了