浅析flex弹性盒子伸缩比

之前在做移动端内容左右滑动时，被flex属性绕晕了。说实话，在网上看了很多讲述flex属性的相关博客，说的非常复杂，不如自己总结的香。今天用一篇博客带你玩转flex属性！

准备工作

弹性容器开启弹性布局display:flex，弹性盒子默认从起点依次排列。

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box {
            display: flex;
            height: 500px;
            border: 1px solid #ff3040;
        }
        .box div {
            width: 100px;
            height: 100px;
            color: aliceblue;
            font-size: 50px;
            text-align: center;
        }
        .box div:nth-child(1) {
            background-color: pink;
        }
        .box div:nth-child(2) {
            background-color: skyblue;
        }
        .box div:nth-child(3) {
            background-color: plum;
        }
        .box div:nth-child(4) {
            background-color: palevioletred;
        }
    </style>

    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>

flex属性详解

弹性容器开启弹性布局display:flex，弹性盒子才具有flex属性。flex属性包括三个部件：扩展比率（flex-grow）、收缩比率（flex-shrink）和伸缩基准线（flex-basis）。

扩展比率（flex-grow）：弹性盒子如何分配剩余空间。若省略，则flex-grow为1。

收缩比率（flex-shrink）：弹性容器宽度不够时压缩弹性盒子的宽度。若省略，则flex-shrink为1。