Question

我有四张图片：两张小图片，两张图片（尺寸以html显示）。它们的img宽度都设置为100％，但它们的父div设置为特定宽度。当我调整浏览器窗口的大小时，较小的图像会缩小，而较大的图像则不会立即缩小。

我在div周围有一个红色边框，而imgs周围有绿色边框。较小的图像的绿色边框在较大的图像之前收缩。那是为什么？

img {
  border: 3px solid green;
  width: 100%;
}

.item {
  border: 1px solid red;
  max-width: 250px;
  min-width: 60px;
  margin: 10px;
}

由于

Answer 1

tl; dr：这些项目的调整大小不同，因为它们具有不同的flex-basis，它基于图像大小，并且是它们开始弯曲（缩小）的值。每个项目都必须缩小，但较大的项目从较大的起点缩小，因此在缩小后它们仍然更大。（这也是一个迟到的算法＆＃34;钳制＆＃34;以防止它们比max-width更大;这就是让大项目不再疯狂的原因这种情况。但重要的是，他们从flex-basis开始缩小，max-width钳位是事后的想法。）

FIX：如果您为每个弹性项目提供相同的弹性基础，例如flex-basis:250px（与max-width相同），您可能会得到您正在寻找的结果。更新了小提琴：http://jsfiddle.net/brcrnj80/10/

（如另一个答案中所述，flex: 1 1 0（可以更简洁地表达为flex:1）也可以正常工作 - 将flex-basis设置为0，允许flex项目增长（而不是强迫它们缩小），直到它们的最大宽度。通过不同的路径生成相同的结果。）

更长的解释：以下是发生的事情：

默认情况下，所有内容都有flex-basis:auto，在这种情况下，每个弹性项目都会在其图像的固有宽度处开始弯曲。因此，您的大图像弹性项目具有巨大的弹性基础，而您的小图像弹性项目具有较小的弹性基础。
我们看看是否灵活项目的总和＆＃39; flex-basis值大于容器。他们是（因为你的一些图像是巨大的）。所以，我们必须收缩东西。
我们缩小每个弹性项目＆＃34;公平＆＃34;，从其flex-basis 开始缩小，以使所有项目都合适所需的任何部分。所以例如每个项目失去其宽度的1/4（如果恰好是正确的部分，使它们完全适合容器）。
现在，我们检查是否有任何这些＆＃34;暂定的＆＃34;商品尺寸违反商品max-width。在此状态下，包含大型图片的Flex项目可能违反了max-width，例如即使我们拿走了他们1/4的尺寸（在我的例子中），他们仍然比他们的max-width:250px大得多。对于任何此类违规行为，我们冻结项目的最大宽度，然后我们重新开始收缩过程。（我们对min-width违规做了类似的事情。）
在重新开始的缩小过程中，大图像以250px宽度冻结，较小的图像负责所有缩小。

因此，如果没有足够的空间让每个人拥有250px的宽度，那么你的小型弹性物品最终不得不完成所有的缩小。（除非我们受到足够的约束，否则在第一轮收缩中大件物品将缩小至小于250px - 例如，如果我们将每件物品收缩90％，但是，虽然，小件物品也会缩减90％，而且他们会比他们的min-width:60px少，而且他们会被冻结在这个尺寸上，我们会重新开始缩小的方式与我上面描述的方式相同。）

如果您感到好奇，请参阅the "Resolving Flexible Lengths" chunk of the spec了解详情。

Answer 2

有人早些时候在这里发布了答案（我几乎是肯定的，我不确定为什么会被删除？）。

是的，这是chrome和firefox之间的渲染差异，但它很容易解决：

.item { flex: 1 1 0; }

这告诉浏览器所有弹性项目应以0宽度开始，并且所有弹性项目都以相同的速率增长以填充剩余空间。

Answer 3

当我查看您的 JSFiddle 时，问题只是图像框大小不包括边框，因为它需要像这样明确说明：

import numpy as np
from scipy.special import binom

x = 0.1
dx = 0.05

f = lambda x : 4*x**3 + 2*x**2 - x +1
f_1 = lambda x: 12*x**2 + 4*x -1
f_2 = lambda x: 24*x + 4

# Forward Finite Differentation
def diff_fwd(f,x,dx,degree=1):
  f_ans = f(x+((np.arange(degree,-1,-1))*dx)) #get the increments of f(x)
  bin = binom_coeffs(degree)
  bin[1::2] *= -1 ## Changing the signs of the binomial coeffs following
  diff = (bin @ f_ans) / dx**degree #vecotrized form
  return diff

degree = 3
for n in range(0,degree+1):
  print(diff_fwd(f,x,dx,n))

--------------------------------------------------------------------------------

# Backward Finite Differentiation (General Function)
def diff_bwd(f,x,dx,degree=1):
  f_ans = f(x+(np.arange(0,-(degree+1),-1))*dx)
  bin = binom_coeffs(degree)
  bin[1::2] *= -1
  diff =  (bin @ f_ans) / dx**degree
  return diff

degree = 3
for n in range(0,degree+1):
  print(diff_bwd(f,x,dx,n))

img 标签不受 flexbox 的影响，flexbox 只影响它们在 JSFiddle (http://jsfiddle.net/brcrnj80/6/) 中的父 div 我认为市场上的每个 CSS 框架都默认将其作为全局定义包含在内，这让我们忘记了我们需要在需要时自己设置它。

为什么flexbox项目图像根据其初始大小调整大小？

3 个答案: