flex布局盒子
- flex实现骰子是一个联系flex布局的好的素材
第一种
.second-face {
display: flex;
justify-content: space-between;
}
第二种
.second-face {
display: flex;
justify-content: space-between;
}
.second-face span:nth-child(2){
align-self: flex-end;
}
第三种
.third-face {
display: flex;
justify-content: space-between;
}
.third-face span:nth-child(2){
align-self: center;
}
.third-face span:nth-child(3){
align-self: flex-end;
}
第四种
.fourth-face{
display: flex;
justify-content: space-between;
}
.fourth-face .column:nth-child(1){
display: flex;
flex-direction: column;
justify-content: space-between;
}
.fourth-face .column:nth-child(2){
display: flex;
flex-direction: column;
justify-content: space-between;
}
第五种
.fifth-face {
display: flex;
justify-content: space-between;
}
.fifth-face .column:nth-child(1){
display: flex;
flex-direction: column;
justify-content: space-between;
}
.fifth-face .column:nth-child(2){
display: flex;
flex-direction: column;
justify-content: center;
}
.fifth-face .column:nth-child(3){
display: flex;
flex-direction: column;
justify-content: space-between;
}
第六种
.sixth-face {
display: flex;
justify-content: space-between;
}
.sixth-face .column:nth-child(1){
display: flex;
flex-direction: column;
justify-content: space-between;
}
.sixth-face .column:nth-child(2){
display: flex;
flex-direction: column;
justify-content: space-between;
}