接上一篇,说一下flex布局的实例,转自阮一峰老师的博客
骰子的布局
html页面模版
<div class="box">
<span class="item"></span>
</div>
div代表容器,span代表骰子的点
一个
左上对齐
.box {
display: flex;
}
居中对齐
.box {
display: flex;
justify-content: center;
}
左对齐
.box {
display: flex;
justify-content: flex-end;
}
垂直靠左居中
.box {
display: flex;
align-items: center;
}
水平垂直居中
.box {
display: flex;
align-items: center;
justify-content: center;
}
靠下水平居中
.box {
display: flex;
align-items: flex-end;