app的排版布局css |css3网页加载旋转动画

/* ---------------------- 1. Flexbox 布局 ---------------------- */
.container{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.item{
width: 50%;
height: 100px;
margin: 10px;
padding: 10px;
}
/* ---------------------- 2. 网格布局 ---------------------- */
.container{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.item{
height: 150px;
margin: 10px;
padding: 10px;
}
/* ---------------------- 3. 绝对定位布局 ---------------------- */
.container{
position: relative;
height: 500px;
}
.item{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
}
/* ---------------------- 4. 流式布局 ---------------------- */
.item{
width: 50%;
height: 100px;
margin: 10px;
padding: 10px;
float: left;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}

以上是几个常见的移动设备app排版布局方式，从Flexbox布局到流式布局都可以适用于不同的场景。