Question

我有三个div占据容器的整个宽度。左右div（应该）具有固定宽度，如300px。主div应占用剩余空间。但是，如果主div中的文字增加，则其增长的方式是其他两个div变得小于300像素。

CSS

.container {
    display:flex;
}
.main {
  background:#CCC;
    width:auto;
}
.left {
  background:#8F8;
    width:300px;
}
.right {
    background:#F80;
    width:300px;
}

HTML

<div class='container'>
  <div class='left'>
  Left
  </div>
  <div class='main'>
  Main with long enough text to occupy more than a line, and a few more just to be sure.
  </div>
  <div class='right'>
  Right
  </div>
</div>

JSFiddle：https://jsfiddle.net/zLLnbo0u/

如果删除了正确的div或正文，则可以看到问题：左div自动增加（返回300像素）。如何使左右div精确地为300像素，而主div占据剩余空间，无论文本长度如何？

Answer 1

flex-shrink属性指定弹性项目的弹性收缩因子，并确定当没有足够的空间时弹性项目相对于弹性容器中其余弹性项目的收缩程度。

它的默认值是1，当你省略它时，它意味着所有项目都会平均缩小。

因此，如果您将flex-shrink: 0;添加到left / right，则会保留其宽度，因为值0表示根本不允许它们缩小。

Updated fiddle

Stack snippet

＆＃13;

.container {
	display:flex;
}
.main {
  background:#CCC;
	width:auto;
}
.left {
  flex-shrink: 0;
  background:#8F8;
	width:300px;
}
.right {
  flex-shrink: 0;
	background:#F80;
	width:300px;
}

＆＃13;

<div class='container'>
  <div class='left'>
  Left
  </div>
  <div class='main'>
  Main with long enough text to occupy more than a line, and a few more just to be sure.
  </div>
  <div class='right'>
  Right
  </div>
</div>

＆＃13;

为什么以像素为单位指定的div宽度会变小？

1 个答案: