弹性盒子属性的部分演示

弹性盒子

.flex {
            display: flex;
            height: 500px;
            width: 80%;
            margin: 0 auto;
            /* 设置排版的方式 默认为row */
            /* column为竖版 需要给子元素设置高度 */
            flex-direction: column;
            /* 本次设置为默认值 仅供参考 设置属性为grow shrink basis */
            flex: 0 1 auto;
            /*  复合属性  设置属性为direction warp*/
            /* felx-dirction：为排序方式  */
            /* felx-warp：为多行显示  */
            flex-flow: row wrap;
            /* 水平对齐 justify-content */
            justify-content: center;
            /*垂直对齐 align-items*/
            align-items: center;
        }

        .f {
            width: 300px;
            height: 200px;
        }

        .f1 {
            background-color: aqua;
            /* 放大缩小尽量只开启一个 */
            /* 放大属性 */
            /*flex-grow: 0;*/
            /* 缩小属性  控制页面的宽度来展示效果*/
            /*flex-shrink: 10;*/
            /* 在子元素中使用复合属性 */


        }

        .f2 {
            background-color: burlywood;
        }


        .f3 {
            background-color: darkgoldenrod;
        }

 <div class="flex">
        <div class="f f1"></div>
        <div class="f f2"></div>
        <div class="f f3"></div>
    </div>

查看全部属性