flex布局简介

最新推荐文章于 2024-08-10 17:13:35 发布

m0_72181246

最新推荐文章于 2024-08-10 17:13:35 发布

阅读量241

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/m0_72181246/article/details/125442626

版权

本文介绍了Flex布局中的flex-shrink属性，用于控制子元素在空间不足时的收缩比例。通过实例展示了默认情况下，子元素如何按比例收缩以适应容器。同时，文章还探讨了当设置flex-shrink为0时，子元素将不会收缩，导致容器溢出的情况。了解这一属性对于优化移动端布局，如H5页面和微信小程序的开发至关重要。

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

一、简介： Flex是Flexible Box的缩写，意为弹性布局。是W3C在2009年提出的一个新的布局方案。可以方便的实现各种页面布局。目前浏览器兼容如下： Flex在移动端开发上已是主流，比如H5页面，微信小程序等等。

二、相关属性

flex-shrink属性可以控制子元素收缩的比例，它的默认值是 1，即 flex-shrink: 1，每个元素按照自己宽的比例收缩。比如三个元素的宽分别为 100px，200px，300px，上下文的宽度为200px。超出的宽度为 100 + 200 + 300 - 200，即 400。这需要收缩的400px宽度由三个元素按照自身宽度的比例平分，每个元素分别收缩 100 / 600 * 400, 200 / 600 * 400，300 / 600 * 400，即66.66px，133.33px，200px。

<style>
    .wrapper{
        display: flex;
        border: 1px solid #ccc;
    }
    .box{
        padding: 5px;
        background: #333;
        color: #fff;
        border: 1px solid #fff;
    }
    .w100{
        width: 100px;
    }
    .w200{
        width: 200px;
    }
    .w300{
        width: 300px;
    }
    </style>
    <div class="wrapper w200">
        <div class="box w100">内容1</div>
        <span class="box w200">内容2内容2</span>
        <div class="box w300">内容3内容3内容3</div>
    </div>

如果给每一个子元素都设置flex-shrink: 0，每一个元素都不想收缩，那么上下文就溢出了。

<style>
    .wrapper{
        display: flex;
        border: 1px solid #ccc;
    }
    .box{
        padding: 5px;
        background: #333;
        color: #fff;
        border: 1px solid #fff;
    }
    .w100{
        width: 100px;
    }
    .w200{
        width: 200px;
    }
    .w300{
        width: 300px;
    }
    .shrink0{
        flex-shrink: 0;
    }
    .shrink2{
        flex-shrink: 2;
    }
    .shrink3{
        flex-shrink: 3;
    }
    </style>
    <div class="wrapper w200">
        <div class="box w100 shrink0">内容1</div>
        <span class="box w200 shrink0">内容2内容2</span>
        <div class="box w300 shrink0">内容3内容3内容3</div>
    </div>