接上一篇，说一下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; justify-content: center; }

左下角

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

两个

分散对齐

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

垂直分散对齐

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

水平居中\垂直分散对齐

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

水平靠右\垂直分散对齐

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

一个左上角,一个水平垂直居中

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

一个左上角一个右下角

.box { display: flex; justify-content: space-between; } .item:nth-child(2) { align-self: flex-end; }

三个

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

四个

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

<div class="box"> <div class="column"> <span class="item"></span> <span class="item"></span> </div> <div class="column"> <span class="item"></span> <span class="item"></span> </div> </div> .box { display: flex; flex-wrap: wrap; align-content: space-between; } .column { flex-basis: 100%; display: flex; justify-content: space-between; }

六个

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

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

<div class="box"> <div class="row"> <span class="item"></span> <span class="item"></span> <span class="item"></span> </div> <div class="row"> <span class="item"></span> </div> <div class="row"> <span class="item"></span> <span class="item"></span> </div> </div> .box { display: flex; flex-wrap: wrap; } .row{ flex-basis: 100%; display:flex; } .row:nth-child(2){ justify-content: center; } .row:nth-child(3){ justify-content: space-between; }

九个

.box { display: flex; flex-wrap: wrap; }