display 指定 HTML元素盒子类型。
flex-direction 指定了弹性容器中子元素的排列方式
justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap 设置弹性盒子的子元素超出父容器时是否换行。
align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow flex-direction 和 flex-wrap 的简写
order 设置弹性盒子的子元素排列顺序。
align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。
flex 设置弹性盒子的子元素如何分配空间。
align-content 属性
align-content 属性用于修改 flex-wrap 属性的行为。用于设置各个行的对齐
stretch ：各行将会伸展以占用剩余的空间，默认值
flex-start：各行向弹性盒容器的起始位置堆叠
flex-end： 各行向弹性盒容器的结束位置堆叠
center ：各行向弹性盒容器的中间位置堆叠
space-between：各行在弹性盒容器中平均分布
space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半
flex-wrap 属性
flex-wrap 属性用于指定弹性盒子的子元素换行方式。
nowrap：默认，弹性容器为单行，该情况下弹性子项可能会溢出容器。
wrap ：弹性容器为多行，该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse ：反转 wrap 排列
align-items 属性
align-items 属性设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-start：元素位于容器的开头
flex-end：元素位于容器的结尾
center：元素位于容器的中心
baseline：元素位于容器的基线上
stretch：默认值。元素被拉伸以适应容器
justify-content 属性
justify-content属性表示内容对齐，应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）
flex-start：项目位于容器的开头，默认值。
flex-end：项目位于容器的结尾
center：项目位于容器的中心
space-between：项目位于各行之间留有空白的容器内
space-around：项目位于各行之前、之间、之后都留有空白的容器内
flex-direction属性
flex-direction 属性指定了弹性子元素在父容器中的位置
row：横向从左到右排列（左对齐），默认的排列方式
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面）
column：纵向排列
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>骰子</title>
</head>
<body>
<style>
.box {
height: 200px;
width: 200px;
position: relative;
transform-style: preserve-3d;
animation: zhuan 500s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-play-state: running;
margin: 0 auto;
top: 100px;
}
.box div {
display: flex;/*设置容器为弹性盒子*/
background: #f8f8f8;
width: 200px;
height: 200px;
position: absolute;
border: 1px solid #b6acac;
flex-direction: column;/*设置主轴为纵向向下*/
justify-content: space-around;/*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/
border-radius: 20px;/*边框圆角*/
box-shadow: 0px 0px 10px #000;/*边框阴影*/
}
/*rotatey(90deg)围绕y轴旋转90度*/
/*translatez(-100px)像块的正面移动-100px*/
.box div.son1{
transform:translatez(100px);
justify-content: center;/*设置子元素的主轴上的对齐方式为居中*/
align-items: center;/*设置子元素的交叉轴上的对齐方式为居中*/
}
.box div.son2{
transform:rotatey(90deg) translatez(100px);
align-items: center;/*设置子元素的交叉轴上的对齐方式为居中*/
}
.box div.son3{
transform:rotatex(90deg) translatez(100px);
align-items: center;/*设置子元素的交叉轴上的对齐方式为居中*/
}
.box div.son4{
transform:rotatex(90deg) translatez(-100px);
}
.box div.son5{
transform:rotatey(90deg) translatez(-100px);
}
.box div.son6{
transform:translatez(-100px);
}
@keyframes zhuan{
0%{
transform:rotatex(0deg) rotatey(0deg) rotatez(0deg);
}
100%{
transform:rotatex(46000deg) rotatey(100000deg) rotatez(50000deg);
}
}
.box span {
width: 40px;
height: 40px;
border-radius: 50%;
background: black;
box-shadow: 0px 0px 10px #080808;
}
.box span.red{background: red;}
.box div.son3 span:nth-of-type(1){align-self: flex-start;/*设置自己的对齐方式，排列的起点*/}
.box div.son3 span:nth-of-type(3){align-self: flex-end;/*设置自己的对齐方式，排列的终点*/}
li{display: flex;/*设置容器为弹性盒子*/}
.box div.son6 li,.box div.son5 li,.box div.son4 li{justify-content: space-around;/*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/}
.box div.son5 li:nth-of-type(2){justify-content: center;}
.box:hover{animation-play-state:paused;/*停止动画*/}
</style>
<div class="box" style="transform:rotatex(2250deg) rotatey(1350deg) rotatez(1800deg);transition: transform 5s;transition-timing-function: cubic-bezier(1,0,0,1);">
<div class="son1">
<span class="red"></span>
</div>
<div class="son2">
<span></span>
<span></span>
</div>
<div class="son3">
<span></span>
<span class="red"></span>
<span></span>
</div>
<div class="son4">
<li>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
</li>
</div>
<div class="son5">
<li>
<span></span>
<span></span>
</li>
<li>
<span class="red"></span>
</li>
<li>
<span></span>
<span></span>
</li>
</div>
<div class="son6">
<li>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
</li>
<li>
<span></span>
<span></span>
</li>
</div>
</div>
</body>
</html>
渝公网安备 50024202000255号