CSS Flex-当重新调整包装器Flex项的大小时，更改其宽度尺寸

CSS Flex - When re-sizing wrapper flex item change its width dimension

本文关键字：小时 Flex 新调整 Flex- 包装 调整 CSS      更新时间：2023-12-21

我使用CSS Flex是为了在包装器中显示三个div。第一个DIV（item0）的宽度尺寸为50px。

我需要更改wrapper的高度，并在包装器内保持item0和item1 DIV的原始宽度。

我目前的问题是：

  • 重新调整wrapper的大小时，flex的项（item0）将获得不同的width。尺寸

请单击示例中的两个按钮以查看尺寸的变化。

我想知道：

  • 为什么宽度大小发生变化
  • 如何保持item0和item2的宽度大小与我原来的CSS设置相同

注：

我知道滚动条出现占用了空间。如何将item0和item2保持在固定宽度，并拉伸item1以填充剩余空间？（我尝试过使用%，但无法得到想要的结果）。

var btn0 = document.getElementById('btn0');
var btn1 = document.getElementById('btn1');
var item0 = document.getElementById('item0');
var result = document.getElementById('result');
var wrapper = document.getElementById('wrapper');
btn0.addEventListener('click', function(event) {
  wrapper.style.height = '25px';
  result.value = item0.getBoundingClientRect().width;
});
btn1.addEventListener('click', function(event) {
  wrapper.style.height = '350px';
  result.value = item0.getBoundingClientRect().width;
});
#wrapper {
  width: 250px;
  height: 350px;
  background-color: gray;
  overflow: auto;
}
#flex-container {
  display: flex;
}
#item0 {
  width: 50px;
  background-color: red;
  height: 150px;
}
#item1 {
  width: 150px;
  background-color: orange;
  height: 150px;
}
#item2 {
  width: 50px;
  background-color: pink;
  height: 150px;
}
<div id="wrapper">
  <div id="flex-container">
    <div id="item0" class="item">a
    </div>
    <div id="item1" class="item">b
    </div>
    <div id="item2" class="item">c
    </div>
  </div>
</div>
<button id='btn0' type="button">Smaller wrapper</button>
<button id='btn1' type="button">Bigger wrapper</button>
item0 width is: <input id="result"type="text">

对item0样式使用flex: 0 0 50px。

参见jsfiddle

它告诉flexbox布局不要增长也不要收缩，并给它50像素的宽度。

对flexbox项目使用flex:属性总是很好的，因为它的默认值可能因浏览器而异。（事实上，你的问题不会发生在firefox中，例如）

当容器的宽度减少时，所有子元素也会按比例减少。

将flex: 0 0 auto;添加到项0和项2。当空间不足时，它不允许元素收缩到最小值。

var btn0 = document.getElementById('btn0');
var btn1 = document.getElementById('btn1');
var item0 = document.getElementById('item0');
var result = document.getElementById('result');
var wrapper = document.getElementById('wrapper');
btn0.addEventListener('click', function(event) {
  wrapper.style.height = '25px';
  result.value = item0.getBoundingClientRect().width;
});
btn1.addEventListener('click', function(event) {
  wrapper.style.height = '350px';
  result.value = item0.getBoundingClientRect().width;
});
#wrapper {
  width: 250px;
  height: 350px;
  background-color: gray;
  overflow: auto;
}
#flex-container {
  display: flex;
}
#item0 {
  flex: 0 0 auto;
  width: 50px;
  background-color: red;
  height: 150px;
}
#item1 {
  width: 150px;
  background-color: orange;
  height: 150px;
}
#item2 {
  flex: 0 0 auto;
  width: 50px;
  background-color: pink;
  height: 150px;
}
<div id="wrapper">
  <div id="flex-container">
    <div id="item0" class="item">a
    </div>
    <div id="item1" class="item">b
    </div>
    <div id="item2" class="item">c
    </div>
  </div>
</div>
<button id='btn0' type="button">Smaller wrapper</button>
<button id='btn1' type="button">Bigger wrapper</button>
item0 width is: <input id="result"type="text">

相关文章：