时间戳

首页 > 解决方案 > flex-grow 属性似乎无法正常工作

javascript - flex-grow 属性似乎无法正常工作

问题描述

我在父级下有一个父级 div 和两个子级 div。据我了解，当我将第一个孩子的 flex-grow 设置为零时，这个元素的宽度永远不会改变，但是当我向第二个孩子添加一些文本时，第一个孩子的宽度会减小。但为什么？

document.querySelector('#button').addEventListener('click', function() {
  document.querySelector('.child2').appendChild(document.createTextNode('This is text. '));
})
.parent {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  display: flex;
}

.child1 {
  width: 100px;
  flex-grow: 0;
  background: red;
}
<button id="button">Add text</button>

<div class="parent">
  <div class="child1">fdsafa</div>
  <div class="child2"></div>
</div>

标签： javascriptcssflexbox

解决方案

你说的对。如果它正在扩展，则flex-grow停止宽度的变化。但是，如果它变得越来越小，它不会做任何事情。那是为了什么。试穿孩子。 flex-shrinkflex-shrink

document.querySelector('#button').addEventListener('click', function() {
  document.querySelector('.child2').appendChild(document.createTextNode('This is text. '));
})
.parent {
  width: 400px;
  height: 400px;
  background-color: #ccc;
  display: flex;
}

.child1 {
  width: 100px;
  flex-shrink: 0;
  background: red;
}
<button id="button">Add text</button>

<div class="parent">
  <div class="child1">fdsafa</div>
  <div class="child2"></div>
</div>

推荐阅读