Flex布局

白球在主轴的头部，居中，尾部。

可以使用display：flex和justify-content：flex-start/end和center配合实现。

白球在侧边轴的头部，居中，尾部。在重定向为侧边轴后。即direction：column

可以使用display：flex和justify-content：flex-start/end和center配合实现。

侧边轴居中可以使用 display：flex和align-items

小白球居中当前框的正中心 使用display：flex，align-items:center，justify-content:center

小白球在侧边轴最下方的同时居中 使用display：flex，align-items:center，justify-content:flex-end，direction：columns

小白球居于侧边轴与主轴共同的尾部 display：flex，align-items:flex-end，justify-content:flex-end