时间戳

首页 > 解决方案 > 对 Flex Shrink and Grow 非常困惑

html - 对 Flex Shrink and Grow 非常困惑

问题描述

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

.container {
  width: 100%;
  height: 200px;
  display: flex;
}

.box1 {
  width: 25%;
  min-width: 400px;
  height: 100%;
}

.box2 {
  width: 75%;
  height: 100%;
}

所以我想做的是做一个div100 % width。子元素将是25%和75%。我希望25% div的人拥有min-width. 所以我希望75% div在最小宽度box1超过25%时自动调整为仅填充剩余空间。

两者都不flex-grow或flex-shrink似乎对我有用。我不想box2缩小，因为它应该比box1大多数时候都大。我不想box2增长，因为它有时也会小于box1.

仅供参考：我应该注意，我将它与 slick.js 滑块一起使用。不过，我的两个 div 没有受到插件的影响，所以我的滑块被包裹在一个额外的容器 (box2) 中。滑块容器占用框 2 的 100% 宽度。我知道 flex 似乎在这种情况下通常会动态调整，所以如果我在框 2 中有一个段落，宽度将动态调整，但滑块似乎正在制作它真的很挑剔，它需要包含 box2 的宽度才能正常工作。

标签： htmlcssflexboxslick.js

解决方案

.container {
  display: flex;
  height: 200px;
  border: 1px dashed black;
}

.box1 {
  flex: 1 0 400px; /* flex-grow, flex-shrink, flex-basis */
  max-width: 25%;
  background-color: green;
}

.box2 {
  flex-grow: 1;
  background-color: orangered;
}
<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

所以我想做的是制作一个 100% 宽度的 div。

完毕。设置了display: flex一个块级容器，它占据了父级的 100% 宽度。

子元素将是 25% 和 75%。我希望 25% 的 div 有一个最小宽度。

好的。.box1最小宽度为 400px（在您的代码中设置），最大宽度为 25%。

所以我希望 75% div 在最小宽度超过 25% 时自动调整为仅填充剩余空间。

然后不要使用 75%。取而代之的是 use flex-grow: 1，它告诉.box2消耗未被使用的空间.box1。

推荐阅读