Flex弹性布局在项目中的运用

最新推荐文章于 2024-08-16 14:53:15 发布

cdgogo

最新推荐文章于 2024-08-16 14:53:15 发布

阅读量373

点赞数

分类专栏： Flex弹性布局

本文链接：https://blog.csdn.net/cdgogo/article/details/108011683

版权

本文详细介绍了Flex布局在实际项目中的运用，包括如何实现头尾固定、中间内容自适应的布局，以及在列表布局中如何实现最后一行左对齐的多种方法。此外，还探讨了Flex布局实现瀑布流的解决方案。

摘要由CSDN通过智能技术生成

一、Flex布局实现头尾固定、中间内容自适应

头尾固定，中间区域可以滑动效果是移动端最常见的效果，以京东页面为例。以前开发时常用的方法是用固定布局position:fixed;实现，但是该方法在ios上或者其他机型上会出现问题。现在，可以用flex方法快速实现该布局。

代码HTML：

<div class="wrap">
        <div class="header">头部</div>
        <div class="content">中间内容区域</div>
        <div class="footer">尾部</div>
    </div>

CSS样式：

html,body{
   
    height: 100%;    /* 很重要 */
}
.wrap{
   
    width: 100%;
    height: 100%;     /* 很重要 */
    display: flex;
    flex-direction: column;
    font-size: 16px;
}
.header{
   
    background: aquamarine;
    height: 60px;
}
.content{
   
    flex: 1;    /* 很重要 */
    overflow-y:auto; /* 很重要，否则当该内容超过一屏时，尾部区域不会固定 */
    background: #4CAF50;
}
.footer{
   
    background: tan;
    height: 40px;
}

/* 让内容居中显示 */
.header,.content,.footer{
   
    display: flex;
    align-items: center;
    justify-content: center;
}