deplay：flex 将元素定位到最底部

最新推荐文章于 2025-06-20 03:32:06 发布

原创最新推荐文章于 2025-06-20 03:32:06 发布 · 1.3w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex

技术资料专栏收录该内容

188 篇文章

订阅专栏

本文深入探讨了CSS中Flex布局的应用技巧，包括如何使用flex属性使元素在容器内自动调整大小和位置，实现响应式设计。特别关注了父元素与子元素的配置，如设置min-height, flex-direction, 和flex属性，确保子元素能够在不同屏幕尺寸下保持预期的布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//父元素
.a{
  min-height: 100%;
  display: flex;
  flex-direction: column;
} 
//子元素1
.b{
   -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}
//子元素2
.c{
    flex: 1 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 50px 0;
    .d{
       text-align:center;
     }
}
这样子元素2一直在app底部  用position定在底部会随着键盘弹上去 
.a
 .b
 .c
   .d

.pager-wrapper,
.indexBox {
  height: 100%;
}
//首页
.indexBox {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: url("~@/js/assets/picture/bg.jpg") center top no-repeat; //require("../assets/20jp.png"),
  background-size: 100% auto;
  .home {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 100px 0;
    .goBtn {
      width: 750px;
      height: 147px;
      background: url("~@/js/assets/picture/go.png") center no-repeat;
      background-size: 100% auto;
    }
    .ruleTip {
      width: 120px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-bottom: 1px solid #2193df;
      color: #2193df;
      font-size: 28px;
    }
  }
}
<!-- 主页 -->
        <div class="indexBox"  v-show="homeShow">
            <div class="home">  
                <div class="goBtn" @click="start"></div>    
                <div class="ruleTip" @click="ifshowRule">活动规则</div>     
            </div>
        </div>