CSS弹性盒子-526互联

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*父元素属性：
        display开启弹性盒子 默认为横向摆放
        flex-direction：指定子元素在父类中的摆放位置 row水平，左对齐 row-revrese反转，右对齐column上对齐 column-reverse 反纵向，下对齐
        justify-content:上下对齐方式
         align-items:左右对齐方式
        */
        .songs{
            width: 700px;
            height: 500px;
            background-color: slateblue;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        /*子元素属性：
        flex-grow/flex:根据比分配空间，其权重  在之后 宽度属性不生效，其优先级高于宽度
         */
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            flex-grow: 1;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color:green;
            flex-grow: 3;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: blue;
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <div class="songs">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

在父类元素的属性中确定元素的摆放位置

盒子

弹性