CSS布局之使用Flex布局画骰子（2点）

若无基础，请优先阅读学习此文档阮一峰 Flex 布局教程：语法篇

上一篇文章CSS布局之使用Flex布局画骰子（1点）

这次提升点难度，画2个点的骰子。大家可以先看图片默写代码，然后与文中代码做校验，来验证自己是否理解了Flex布局。

骰子样式：

<div class="box">
   <span class="item"></span>
   <span class="item"></span>
</div>

.box {
    
    
	width: 100px;
    height: 100px;
    border-radius: 20px;
    padding: 10px;
    background-color: rgba(230, 230, 230, 1);
    /* 对四条边进行阴影浮雕修饰 */
    box-shadow: inset 0 5px 2px rgba(250, 250, 250, 1),
        inset 5px 0 2px rgba(215, 215, 215, 1),
        inset -5px 0 2px rgba(215, 215, 215, 1),
        inset 0 -5px 2px rgba(187, 187, 187, 1);
}
.item {
    
    
    width: 30px;
    height: 30px;
    margin: 2px;
    border-radius: 50px;
    background-color: rgba(51, 51, 51, 1);
    box-shadow: inset 0 5px 2px rgba(22, 22, 22, 1), inset 0 -5px 2px rgba(85, 85, 85, 1)
}

1、左右上角

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

2、左右下角

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

3、左上下角

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

4、右上下角

.box{
    
    
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	align-items:flex-end;
}

5、反对角

.box{
    
    
	display:flex;
	justify-content:space-between;
}
.item:nth-child(2){
    
    
	align-self:flex-end; /* 单个项目自己的对齐方式 */
}

6、正对角

.box{
    
    
	display:flex;
	justify-content:space-between;
}
.item:nth-child(1){
    
    
	align-self:flex-end; /* 单个项目自己的对齐方式 */
}

7、中上角

扫描二维码关注公众号，回复： 17341530 查看本文章

.box{
    
    
	display:flex;
	flex-direction:column;
	align-items:center;
}

8、中右角

.box{
    
    
	display:flex;
	flex-direction:row-reverse;
	align-items:center;
}

9、左上中斜角

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

10、右下中斜角

.box{
    
    
	display:flex;
	flex-direction:row-reverse;
	align-items:flex-end;
}
.item:nth-child(2){
    
    
	align-self:center;
}

下一篇文章CSS布局之使用Flex布局画骰子（3点）