页面内容较少时,footer如果直接跟在content下面,效果会很难看,利用flex items的缩放属性即可解决。
容器得设置最小高度,footer无需设置flex。。
wrap_div:
content_div:.wrap_div { display: flex; align-items: center; flex-direction: column; width: 100%; min-height: 100%; }
.content_div{ display: flex; justify-content: center; width: 100%; flex:1 0 auto; }