給子元素設置flex屬性，其高度屬性會失效嗎？
<!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>
2020-08-13
不會失效。不過父元素.box已經設置過height:200px,底下的三個.box1-3都會按照這個高度來，自己設置的高度就不生效了。