css弹性布局上滑加载

CSS弹性布局是现代网页设计中必不可少的一项技术。在网页的开发中，我们经常会遇到需要上滑加载的情况，这时候使用CSS弹性布局可以实现非常好的效果。

下面是一个CSS弹性布局上滑加载的示例代码：

html,body{
  height:100%;
}

.container{
  height:100%;
  display:flex;
  flex-direction:column;
}

.content{
  flex: 1 1 auto;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.loading{
  height:40px;
  display:flex;
  justify-content:center;
  align-items:center;
}

.loading .spinner{
  width:20px;
  height:20px;
  border-radius:50%;
  border:1px solid rgba(0,0.3);
  border-top-color:#FF4081;
  animation:spin 1s linear infinite;
}

@keyframes spin{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

上面的代码中，我们使用了Flex布局来实现上滑加载功能。首先，我们将HTML和Body的高度均设置为100%以填满整个屏幕。然后，我们用一个.container容器来包含滑动的内容和底部的加载动画，同时设置了display:flex以启用Flex布局。

接着，我们使用flex:1 1 auto将.content元素的flex值设置为1，让其占据容器剩余空间。然后使用overflow-y:scroll来让其拥有纵向滚动条，-webkit-overflow-scrolling:touch让其在移动设备上拥有更加顺畅的滑动效果。

最后，我们在.container的底部放置一个.loading元素，用于显示加载动画。这里我们使用了Flex布局的对齐和居中功能来让加载动画位于容器底部的正中央。通过设置.spinner元素的动画参数，我们实现了一个不断旋转的加载动画。

这样，我们就成功使用CSS弹性布局实现了上滑加载的效果。