html色子的页面布局,弹性布局（骰子）.html

* {

margin: 0;

padding: 0;

}

ul {

margin: 10px;

list-style: none;

width: 50px;

height: 50px;

display: -webkit-box;

display: -webkit-flex;

display: flex;

border: 1px solid gray;

border-radius: 8px;

padding: 4px;

-webkit-box-sizing: border-box;

box-sizing: border-box;

-webkit-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-justify-content: space-around;

justify-content: space-around;

}

li>span {

display: inline-block;

width: 10px;

height: 10px;

border-radius: 10px;

background-color: blue

}

.dice1 {

-webkit-box-pack: center;

-webkit-justify-content: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

align-items: center;

}

.dice1>li>span {

width: 20px;

height: 20px;

border-radius: 20px;

background-color: red;

}

.dice2 {

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

flex-direction: column;

-webkit-box-align: center;

-webkit-align-items: center;

align-items: center;

-webkit-flex-wrap: nowrap;

flex-wrap: nowrap;

}

.dice3>li {

display: -webkit-box;

display: -webkit-flex;

display: flex;

-webkit-align-self: center;

align-self: center;

}

.dice3>li:first-of-type {

-webkit-align-self: flex-start;

align-self: flex-start;

}

.dice3>li:last-of-type {

-webkit-align-self: flex-end;

align-self: flex-end;

}

.dice4,

.dice5,

.dice6 {

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

flex-direction: column;

-webkit-align-content: space-around;

align-content: space-around;

}

.dice4>li,

.dice5>li,

.dice6>li {

display: -webkit-box;

display: -webkit-flex;

display: flex;

-webkit-justify-content: space-around;

justify-content: space-around;

}

.dice4>li>span {

background-color: red;

}

.dice5>li:nth-of-type(2) {

-webkit-box-pack: center;

-webkit-justify-content: center;

justify-content: center;

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史