【HTML/CSS】flex布局绘制骰子

参考博文

CSS flex 弹性盒

父级元素 display:flex ——子元素默认变成block，float失效

flex-direction 主轴方向 row(默认)/row-reverse/column/column-reverse

justify-content（沿着主轴方向）: center/flex-start/flex-end

align-items（垂直主轴方向）：center/flex-start/flex-end

🔶也就是说，更改flex-direction会使后两项值也发生变化

html结构

<div class="father">
    <span class="item">
        1
    </span>
    <span class="item">
        2
    </span>
    <span class="item">
        3
    </span>
</div>

单项目

.father{
   
    display: flex;
    justify-content: center;
    align-items