【CSS】用 flex 布局画骰子

缺乏、安全感 2022-10-19 04:19 260阅读 0赞

# 1. 前言 #

使用 `flex` 布局，画出如下骰子的点数。编码过程见第二大点，若需要完整 `demo代码`，或者供练习用的初始样式代码，都欢迎到我的 [github地址][github] 上下载，还有更多其他CSS源码等你来 `Star`！  
![在这里插入图片描述][20210709120049503.png]

# 2. 过程 #

注：以下代码示例中，会用省略号替代非关键部分代码

**1）初始样式**  
![在这里插入图片描述][20210709120106514.png]

<div class="box">
            <span class="item"></span>
            <span class="item"></span>
            <span class="item"></span>
    </div>
    
    <style type="text/css"> .box { width: 200px; height: 200px; border: 2px solid #ccc; border-radius: 10px; padding: 20px; } .item { display: block; width: 40px; height: 40px; border-radius: 50%; background-color: #666; } </style>

**2）整体使用 flex 布局**  
![在这里插入图片描述][20210709120118419.png]

.box { 
    	...
    	display: flex;
    	justify-content: space-between;
    }

**3）对黑点单独布局**

`align-self`：自身相对于当前 **交叉轴** 布局，详见第 `5）`小点

.item:nth-child(2){ 
    	align-self: center;
    }
    		
    .item:nth-child(3){ 
    	align-self: flex-end;
    }

**4）关于 space-between 和 space-around**

*  `space-between`：元素分别位于最左、中间、最右，`item` 间距相等。如下`图1`，红颜色即相同的 `item` 间距
 *  `space-around`：每个 `item` 左右方向的 `margin` 相等。如下`图2`，同一颜色分别代表每个 `item` 左右的 `margin`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 1]

**5）关于 align-self**

自身相对于当前 **交叉轴** 进行布局。

何为交叉轴？当我们设置了 `flex` 布局后，在不改变 `flex-direction` 属性的情况下，**默认以** **x 方向为主轴**，则 **y 方向为交叉轴**，如图：  
![在这里插入图片描述][20210709120148840.png]

因此，下列代码对第二个黑点布局，效果如下图

.item:nth-child(2){ 
    	align-self: center;
    }

![在这里插入图片描述][20210709120159216.png]

同理

.item:nth-child(3){ 
    	align-self: flex-end;
    }

![在这里插入图片描述][20210709120209589.png]

# 3. 结论 #

`flex` 画骰子有两个要点：

*  整体 `flex` 布局并使用 `space-between`
 *  使用 `align-self` 调整单点位置

[github]: https://github.com/Jokerlsss/css-demo
[20210709120049503.png]: /images/20221005/adeb76780207485e9b933edd974f1d92.png
[20210709120106514.png]: /images/20221005/7ad239a75bb7414398f5c5584b1f827f.png
[20210709120118419.png]: /images/20221005/946f55a7f79648f9bd1b18675a77b220.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70]: /images/20221005/bd28dc9cdb4349cbb71855f7fba0ff22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjY3ODY3NQ_size_16_color_FFFFFF_t_70 1]: /images/20221005/b1b0e9564bef49f99bb6fd24126bda91.png
[20210709120148840.png]: /images/20221005/97a1bf1a095b4b15b4a1df664b8498a8.png
[20210709120159216.png]: /images/20221005/b18db77d7a8d4ff4a8ff94930f1696c1.png
[20210709120209589.png]: /images/20221005/f88d7d71184e46c29a434d6d6a41d43e.png