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

Question

如下布局规则

1. .line-block(小蓝块) 数量、宽高不定

2. .container(容器) 宽高不定

3. .line-block 在行中左对齐，整体中左侧起始对齐

4. .cantainer中以行为单位中间对齐

5. .cantainer中竖直方向为顶部对齐，不等分空间

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

Answer 1

<div&nbsp;class="container"> &nbsp;&nbsp;<div&nbsp;class="flex"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="line-block"></div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="line-block"></div> &nbsp;&nbsp;</div> </div> .container&nbsp;{ &nbsp;&nbsp;width:&nbsp;400px; &nbsp;&nbsp;height:&nbsp;400px; &nbsp;&nbsp;background-color:&nbsp;gray; } .flex&nbsp;{ &nbsp;&nbsp;display:&nbsp;flex; &nbsp;&nbsp;flex-wrap:&nbsp;wrap; } .line-block&nbsp;{ &nbsp;margin:&nbsp;10px; &nbsp;width:&nbsp;30px; &nbsp;height:&nbsp;30px; &nbsp;background-color:&nbsp;blue; }