一个骰子九个点,分别依次实现点所在的位置。
<div class="box">
<span class="item"></span>
</div>
一、单项目对齐方式
1、
.box {
display: flex;//默认首行居左对齐
}
2、
.box {
display: flex;
justify-content: center;//居中对齐
}
3、
.box {
display: flex;
justify-content: flex-end;//居右对齐
}
4、
.box {
display: flex;
align-items: center;//以垂直移动主轴,垂直居中
}
5、
.box {
display: flex;
justify-content: center;
align-items: center;
}
6、
.box {
display: flex;
justify-content: center;
align-items: flex-end;
}
7、
.box {
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
二、双项目对齐方式
<div class="box">
<span class="item"></span>
</div>
1、
.box {
display: flex;
justify-content: space-between;//两端对齐
}
2、
.box {
display: flex;
flex-direction: column;//更改为列对齐方式
justify-content: space-between;//两端对齐
}
3 、
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
4、
.box {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
5、
.box {
display: flex;
}
.item:nth-child(2) {
align-self: center;
}
6、
.box {
display: flex;
justify-content: space-between;
}
.item:nth-child(2) {
align-self: flex-end;
}
三、三项目对齐方式
<div class="box">
<span class="item"></span>
</div>
1、
.box {
display: flex;
}
.item:nth-child(2) {
align-self: center;
}
.item:nth-child(3) {
align-self: flex-end;
}
四、四项目对齐方式
<div class="box">
<span class="item"></span>
</div>
1、
.box {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-content: space-between;
}
2、
<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;
}
五、六项目对齐方式
1、
.box {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
2、
.box {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-content: space-between;
}
3、
<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;
}
总结,用的较多的是前面几种项目对齐方式。