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

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

前端项目中对CSS3的Flex布局使用日趋平常化，但仅限于使用一些常用的水平垂直居中布局，大多数都是使用此3行代码：

display: flex;
justify-content: center;
align-items: center

对于其他的属性则模糊不清，有一些属性甚至都不知道是使用在flex-container上，还是使用在flex-item上面。更有甚者，属性都使用了十几遍，甚至几十遍，到头来还是忘记如何使用（此处可能是ctrl+c、ctrl+v惹的祸）。

鉴于此者，我决定通过画个骰子案例来加深对Flex布局的理解以及属性的使用。

骰子样式：

<div class="box">
   <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;
}

2、中上角

.box{
	display:flex;
	justify-content:center;
}

3、右上角

.box{
	display:flex;
	justify-content:flex-end;
}

4、左中角

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

5、居中

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

6、右中角

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

7、左下角

.box{
	display:flex;
	align-items:flex-end;
}

8、中下角

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

9、右下角

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

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