父容器设为flex,子项目再设置flex-grow、flex-shrink、flex-basis时,子项目宽度可能
无效,这里可能的原因是由于如果flex设置了felx: 0 0 atuo,那么宽度还是有效的,因为auto最终作用在width上,而此时flex-group和flex-shrink也不能伸缩;如果设置成flex: 1 1 auto 就无效了;
- 父容器设置flex,那么子容器的flex-group、flex-shrink、flex-basic优先级比width高!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
display: flex;
background-color: #ccc;
}
.box1 {
border: 3px solid red;
/* flex-grow: 2; */
/* flex-shrink: 1; */
/* flex-basis: 0px; */
width: 3000px;
height: 20px;
}
.box2 {
width:1000px;
height: 100px;
border: 1px solid green;
/* flex: 1; */
/* flex-grow: 1; */
/* flex-shrink: 1; */
/* flex-basis: 200px; */
}
</style>
<script>
window.onresize = () => {
const box = document.querySelector('.box');
const box1 = document.querySelector('.box1');
const box2 = document.querySelector('.box2');
console.log('box', box.offsetWidth);
console.log('box1', box1.offsetWidth);
console.log('box2', box2.offsetWidth);
};
// const box1 = document.querySelector('.box1');
// const box2 = document.querySelector('.box2');
// const observer = new ResizeObserver((entries) => {
// entries.forEach(entry => {
// console.log('大小位置', entry.contentRect)
// console.log('监听的DOM', entry.target)
// })
// })
// observer.observe(document.body);
// observer.observe(box2);
</script>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<!-- <div class='box3'></div>
<div class='box4'></div> -->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
display: flex;
width: 80px;
background-color: #ccc;
}
.box1 {
border: 3px solid red;
flex: 0 0 auto;
/* flex-shrink: 1; */
/* flex-basis: 0px; */
width: 400px;
height: 20px;
}
.box2 {
width:200px;
height: 100px;
border: 1px solid green;
/* flex: 1; */
/* flex-grow: 1; */
/* flex-shrink: 1; */
/* flex-basis: 200px; */
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>