CSS-flex布局

flex常用语法

display: flex

父级元素相关

1. flex-direction 主轴方向【水平方向（默认）、垂直方向】
2. justify-content 主轴上的对齐方式【flex-end结束对齐、space-between两端对齐、center】
3. align-items 交叉轴的对齐方式【center、flex-end】
4. flex-wrap 内部是否换行

子元素相关

1. align-self 子元素在交叉轴的对齐方式【开始对齐（默认）、结束对齐、居中对齐】可以覆盖align-items的属性

数字3骰子的实现

// 伪代码
<style>
.box{display: flex;justify-content: space-between;}
.item:nth-child(2){// 第二个点放中间align-self:center;     
}	
.item:nth-child(3){// 第三个点放右下align-self:flex-end;     
}	
</style>
<div class="box"><span class="item"></span><span class="item"></span><span class="item"></span>
</div>