给子元素设置flex属性,其高度属性会失效吗?

来源:14-4 我想占大头 - 给子元素设置flex占比

慕村7067317

2020-08-13 09:40

<!DOCTYPE html>

<html>


<head>

    <meta charset="UTF-8">

    <title>flex占比</title>

    <style type="text/css">

    .box {

        height: 300px;

        background: blue;

        display: flex;

    }


    .box div {

        width: 200px;

        height: 200px;

    }


    .box1 {

        flex: 1;

        background: red;

        width:50px;

        height:100px;

    }


    .box2 {

        flex: 3;

        background: orange;

    }


    .box3 {

        flex: 2;

        background: green;

    }

    </style>

</head>


<body>

    <div class="box">

        <div class="box1">flex:1</div>

        <div class="box2">flex:3</div>

        <div class="box3">flex:2</div>

    </div>

</body>


</html>


写回答 关注

1回答

  • 慕的地2173049
    2020-08-13 11:22:01
    已采纳

    不会失效。不过父元素.box已经设置过height:200px,底下的三个.box1-3都会按照这个高度来,自己设置的高度就不生效了。

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225812 学习 · 18234 问题

查看课程

相似问题