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

Question

如下布局规则.line-block(小蓝块) 数量、宽高不定.container(容器) 宽高不定.line-block 在行中左对齐，整体中左侧起始对齐.cantainer中以行为单位中间对齐.cantainer中竖直方向为顶部对齐，不等分空间flex和grid的布局不是很熟，试着用，却总是满足了部分，未能真正满足，请教下各位大佬

Answer 1

<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;
}